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
Import the style sheet
Import the stylesheet as we import JS modules in React .
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
<h1>This is a heading</h1>