DEV Community

Cover image for Styling in React.js
Kunal Garg
Kunal Garg

Posted on

4

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

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more