Search code examples
cssreactjscss-modulesreact-css-modules

CSS modules don't privatize element type selectors

I would like to make a CSS module index.module.css as follows which will be only used by App component :

.my-class {
  color: red;
}

label {
  color: blue;
}

In App.js I use import style from "./index.module.css"; to import it, whereas Bpp.js does not import ./index.module.css.

Then, I realize that my-class in Bpp does not apply color: red;, which is expected. However, label in Bpp does apply color: blue; which is not what I wanted.

Here is the code: https://codesandbox.io/s/small-pine-6cpxcx?file=/src/App.js

Note that the css became ._src_index_module__my-class { color: red; } label { color: blue; }, where label did not change: enter image description here

Does anyone know if it is possible to privatize label {color: blue} only for the App component so as to prevent it from being applied to other components?

Solution

  • CSS module's can't privatize styles created on element types, you will need to assign your element a class, or select the element type as a descendant of some class that can be privatized.