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:

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?

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.