How CSS Modules work in React?

CSS Modules in React are a way to locally scope CSS by default in React components. They allow you to write CSS styles in a modular and encapsulated manner, making it easier to manage styles and avoid naming collisions.

How CSS Modules work:

1. Local Scope: CSS Modules automatically generate unique class names for each CSS file, ensuring that styles defined in one component do not affect styles in other components.
2. Importing Styles: In a React component file, you can import CSS files just like you import JavaScript modules using the import statement. This imports the CSS styles as an object.
3. Accessing Styles: When you import a CSS module, you can use the imported object to access the individual class names defined in the CSS file. These class names are scoped to the component where they are imported and can be used in JSX elements like regular class names.
4. Avoiding Naming Collisions: CSS Modules help prevent naming collisions by automatically generating unique class names for each component. This eliminates the need for global or manually scoped class names, reducing the risk of conflicts in large codebases.
5. Build Tool Integration: CSS Modules are often used in conjunction with build tools like Webpack, which automatically processes and transforms CSS files to generate scoped class names during the build process.