A plain react js website without any styling will not look attractive. For a beautiful looking website, we need to add styles in that and that we can do using CSS.
In React Js we can add css using 3 ways.
- Inline CSS
- A regular CSS File
- Using Modules
Regular CSS File
For adding regular css to our file, we have to import the css file using import keyword. Then we can use the classes defined in the stylesheet in our application.
Inline CSS
Every element takes a style attribute, inside that we have to pass a object containing the style definitions.
Using Modules
Modules are also a way to add CSS in react js files, it is useful as it removes the problem of global css conflicts. Here we have to import it using the import keyword, the css module file provides an object, where the classes are the keys and the style definition is their corresponding values.
NOTE : All the css files will be written in the same way as the normal css files. Only while using modules for css, the css files will be saved using the filename.module.css