React - style components using CSS modules

In this article, we would like to show you how to style components using CSS modules in React.

Inside your project open new terminal (Terminal -> New Terminal) and use the following command to install sass as a dev-dependency:

xxxxxxxxxx

npm install --save-dev sass

Create new .module.scss file for your component. Below you can see an example for Navbar component:

In this example, we create a style for navContainer class.

The next step is to import .module.scss file in your .js file. The convention here is to import the file as styles.

Now, we can use use styles to assign style to our component. To do so, we need to use a selector for the class we created earlier (navContainer).