UI is the first step before we start typing logic to complete our front end. So we write the markup followed by the essential styles required to get the desired ui. While writing the markup we have to create meaningful class names to address and access the HTML tag and add style to it. With simple UI and distinct tags we can do so more or less easily. While writing repeating and complex UI, giving meaningful and distinct names becomes a disaster as there are only a few generic names. So we create components and style sheets for individual components. As shown below.
We can see two components, GreenContainer and RedContainer are being imported to the App.js from the components folder inside src. Their respective style sheets are RedContainer.css and GreenContainer.css, which are imported from the styles folder. Let's look at both the component and their style sheets one by one.
The first component, RedContainer.jsx
The respective style sheet is - RedContainer.css
Now have a look at the second component, GreenContainer.js -
CSS file for the second component, GreenContainer.css
Both style sheets contain distinct CSS properties for their respective components. So the expected UI outcome may be a screen where there are two blocks, one is a red square with 150px arms and another one is a green square with 200px arms. Let's have a look at the rendered React app.
Why is this happening? The CSS properties from the last container have been applied to both containers. But how? The answer is just before the React app is rendered all the style sheets are compiled into a single CSS file, where there are two class selectors with the same name - ".container" and this is why CSS properties from the last ".container{}" have been applied to all the containers globally. This issue can be fixed by using CSS Modules. CSS Modules are CSS files where all class names are scoped locally by default. This helps us in the following ways
1) Localizing the styles to specific components prevents this global scope conflict.
2) Allow the use of the same class names in different modules and promote modular styling.
To use modular styling we have to replace ".css" with ".module.css" and import 'styles' from those files.
Importing the styles to their respective components. For RedContainer -
For the GreenContainer
In general, we write className as a string like this, if the className is "container" we will write className = "container". For CSS Modules we will write the class name like this className = {styles.container} in jsx files. Now let's see the react app rendered -
Now there are no issues of CSS conflict and the styles are applied to the respective components appropriately.
Top comments (0)