What are CSS Modules in React?

CSS Modules let you write CSS that is locally scoped to a specific component. This means class names and styles are unique to that component, avoiding conflicts with other styles in your project.

Unlike normal CSS files which are globally scoped, CSS Modules are locally scoped by default. The browser transforms the class name into a unique identifier such as: Filename_classname_hashcode.

Let’s see how to use CSS Modules in React with two components.

import Stylesheet1 from './Stylesheet1.jsx';
import Stylesheet2 from './Stylesheet2.jsx';
export default function App(props) {
  return (
    <>
        <Stylesheet1/>
        <Stylesheet2/>
    </>
  );
}

You can also import multiple CSS Modules inside one component.

This way, you can combine different styles while keeping them scoped properly.

import Stylesheet1 from './Stylesheet1.jsx';
import Stylesheet2 from './Stylesheet2.jsx';
export default function App(props) {
  return (
    <>
        <Stylesheet1/>
        <Stylesheet2/>
    </>
  );
}