What are some examples of using CSS Modules in React?

What are some examples of using CSS Modules in React?

CSS Modules allow you to write CSS that is scoped locally to the component. Here are a few examples:

1. Basic Setup: Create a CSS file named styles.module.css and import it in your React component:

   import styles from './styles.module.css';
   

   Then use it like this:

   <div className={styles.container}>Hello World</div>
   

2. Dynamic Class Names: You can also use conditional class names:

   <div className={isActive ? styles.active : styles.inactive}>Toggle Me</div>
   

3. Composing Classes: You can compose classes from other modules:

   /* styles.module.css */
   .button {
       composes: baseButton from './base.module.css';
   }
   

   This allows you to reuse styles across components.

Can you explain how to set up CSS Modules in a React project?

To set up CSS Modules in a React project, follow these steps:

1. Create a React App: If you haven't already, create a new React app using Create React App:

   npx create-react-app my-app
   cd my-app
   

2. Create a CSS Module: Create a CSS file with the .module.css extension, for example, App.module.css.

3. Import the CSS Module: In your React component, import the CSS module:

   import styles from './App.module.css';
   

4. Use the Styles: Apply the styles using the imported styles object:

   <div className={styles.myClass}>Hello CSS Modules!</div>
   

5. Run Your App: Start your app to see the styles applied:

   npm start
   

   That's it! You now have CSS Modules set up in your React project.

What are the benefits of using CSS Modules?

The benefits of using CSS Modules include:

1. Scoped Styles: CSS Modules automatically scope styles to the component, preventing global style conflicts.
2. Maintainability: It makes your styles more maintainable by keeping them close to the component they style.
3. Dynamic Class Names: You can easily use dynamic class names based on component state.
4. Reusability: Styles can be reused across components without worrying about naming collisions.