Loading lesson path
Concept visual
Start from A
CSS Modules let you write CSS that is scoped locally to a specific component.This prevents CSS class name conflicts and makes your styles more maintainable.
In React, CSS Modules are CSS files where class names are scoped locally by default.
CSS Modules are not a part of the React core library, but are supported by many React build tools. The CSS file have to have the.module.css extension and can be used by importing it into your React file(s).
Button.module.css, where we style some buttons.
Button.module.css, and insert some styles in it:.mybutton {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}Import and use the CSS Module in your component:
Create a Button component that uses the CSS Module:
import styles from './Button.module.css';function App() {
return (<div>
<button className={styles.mybutton}></button> </div>
);
}We import the styles object from the CSS Module We use styles.mybutton to access the mybutton class The actual class name of the button will be unique (e.g., _mybutton_q1obu_1 )
In the example above, we only used one class, but let's add more classes:
Button.module.css
.mybutton {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.primary {
background-color: #007bff;
color: white;
}
.secondary {
background-color: #6c757d;
color: white;
}To demostrate the changes, we need to have two buttons, with two classes each:
An example with two buttons, with different styling:
import styles from './Button.module.css';function App() {
return (<div>
<button className={`${styles.mybutton} ${styles.primary}`}></button>
<button className={`${styles.mybutton} ${styles.secondary}`}></button> </div>
);
}CSS Modules allow you to combine classes using the composes keyword: Which means that one class can inherit the styles of another class. For the previous example, both the primary and the secondary classes are depending on the styles of the mybutton class. This can be done by adding composes: mybutton to the primary and secondary classes:
Example.mybutton {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.primary {
composes: mybutton;
background-color: #007bff;
color: white;
}
.secondary {
composes: mybutton;
background-color: #6c757d;
color: white;
}Now it is enough to use the primary and secondary classes in the component:
Example import styles from './Button.module.css';function App() {
return (<div>
<button className={styles.primary}></button>
<button className={styles.secondary}></button> </div>
);
}When using CSS Modules, the classes in the.module.css file can only be used in the component that imports them. This is done by prefixing the class name with a hash of the file name and a unique identifier. It is safe to use the same class name in different files, as the names will be unique. However, sometimes you want your classes to be available globally, and use them in other components.
:global syntax:Here is a CSS Module with a global class named.myheader:global(.myheader) {
padding: 10px 20px;
font-size: 50px;
color: white;
background-color: dodgerblue;
}:global wrapper makes the class available for everyone.It is simply called.myheader and not prefixed and added a unique identifier like _myheader_q1obu_1 You can use it in your components like this:
Example import styles from './BlueHeader.module.css';function App() {
return (<div> <h1 className="myheader">