Modular Stylesheets, or CSS Modules, allow you to write CSS that’s scoped to a specific component.
Here is how you can use modular style sheets in React.js.
1. Creating CSS Module File:
First, create a new CSS file. Name it appropriately reflecting the associated component. React recognizes the “\*.module.css” extension as a CSS Module. For example, you can create a “Button.module.css” for the Button component.1. Writing CSS in the CSS Module File:
Write styles in the CSS Module file same as you would in any regular CSS file. An example style sheet: \`\`\`css /_ Button.module.css _/ .button { padding: 10px; color: white; background-color: black; } \`\`\`1. Importing the CSS Module:
You can import and use the CSS module in the associated component file just like any other JavaScript modules in your React project. If your component is a Button, for example, the import might look like this: \`\`\`javascript import styles from ‘./Button.module.css’; \`\`\`1. Using the CSS Classes:
You access the class by using the format “styles.yourClassName”. An example usage inside the Button component: \`\`\`javascript function Button() { return ; } \`\`\` Here, ‘styles’ refers to the imported CSS module, and ‘button’ is the CSS class we defined in the CSS Module file. This way, we’re applying the CSS class to the button element in the render method.1. Benefit:
One major benefit with CSS Modules is that class names are locally scoped by default. Your CSS is not going to accidentally overwrite styles in other parts of your application because class names become unique with CSS Modules.Please note that `Create React App` fully supports CSS Modules out of the box since version 2. However, for other development setups, you might have to configure CSS Modules.
