Example of using CSS Modules in React Components
Code: Here, we refer to the classes .bgColor, .greenText, and .redText from the imported styles, and the styles get implemented on the elements. We can use the necessary effects by referencing each class in the stylesheet using the styles object.
CSS
/* gfg.module.css */ .bgColor { background : lightgreen; } .redText { color : red ; font-size : 28px ; } .greenText { color : darkgreen; font-size : 45px ; } |
Javascript
import styles from './gfg.module.css' function App() { return ( <> <div className={styles.bgColor}> <h1 className={styles.greenText}>GFG</h1> <h3 className={styles.redText}>CSS Module is simple</h3> </div> </> ) } export default App |
Output:
How do CSS Modules help in styling React components?
CSS Modules help in styling React components by providing a way to create modular stylesheets where each component’s styles are contained within its own module.
This reduces the risk of naming clashes, ensures that changes in one component won’t affect others, and makes it clear which styles are associated with each component. This simplifies debugging and maintenance.
Table of Content
- Utilizing CSS Modules
- Example of using CSS Modules in React Components
- Advantages of using CSS Modules
To Create a Basic React Application Setup refer to the Folder Structure for a React JS Project article.