Lesson 8 - Styling In React

8.3 - CSS Modules

CSS Modules is another way to provide style to your application. They are convenient for components that are placed in a separate file. The best thing about CSS Modules is that you don't have to worry about naming conflict as the CSS inside the module is only available for the component that imported it.

Note that the name of the CSS module must have the extension .module.css

Consider we have created a CSS module my_style.module.css with the following styles,

.header {
  color: blue;
  padding: 40px;
  margin: 10px;
  text-align: center;
}

Now import the CSS module to the targeted component and call the CSS class inside the className properties as follows:

import React  from 'react';
import styles from './my_style.module.css';

function App() {
 return (
 <h1 className={styles.header}>Hello Car!</h1>
 );
}