Styling in React.js

gargkunal

Kunal Garg

Posted on December 17, 2021

Styling in React.js

Today we are going to learn styling in css and how to declare variables and all.

For styling we can use inline and external file css which can be component based or page based. So we are going to use className for naming the component.

Also we can use variable for reuse value through the component.

Given below the example

 <div className="nav-wrapper">
      <nav className='nav-heading'>{c}</nav>
      <ul className='nav-items'>
        <li>Home</li>
        <li>Contact</li>
        <li>About</li>
      </ul>
    </div>
Enter fullscreen mode Exit fullscreen mode

Css Code

.nav-wrapper{
    display: flex;
    height: 80px;
    background-color: aliceblue;
    width: 100vw;
    padding: 0 !important;
}
Enter fullscreen mode Exit fullscreen mode

πŸ’– πŸ’ͺ πŸ™… 🚩
gargkunal
Kunal Garg

Posted on December 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related