How to use CSS styles in Reactjs

How to use CSS styles in Reactjs

Web app without CSS as to Tea without sugar. If you don’t know CSS , grab some CSS lesson from the WC3 school and come back. So how we use CSS in React apps ?

We have two options

• Include regular CSS stylesheet file using import
• Implement a functional component as Stylesheet

First option is look like simple go head and create a style.css file and add the following CSS style in int

.container{
  background-color: skyblue;
}
h2 {
    text-align: center;
}

Import the style sheet

Import the stylesheet as we import JS modules in React .

import './Styles.css'

Using the styles

Since it is a regular style sheet we can use it with className attribute as follow. A class file in style file start with period (.) and id is begins with hash (#). We can combine multiple class in a ClassName attribute using space.

Here is the sample style usage in render portion of a React ClassComponent

render() {
    return (
      <div className="container">
        <h1>This is a heading</h1>
      </div>
    );
  }