CSS Modules无法私有化元素类型选择器，如何仅作用于目标组件？

是的，完全可以让label { color: blue; }仅作用于App组件，核心思路是将全局选择器转化为CSS模块的局部作用域选择器，以下是两种常用实现方式：

方法一：类选择器嵌套标签选择器 #

修改index.module.css，用App组件的局部类包裹label选择器，借助CSS模块的局部作用域特性实现私有化：

.my-class {
  color: red;
}

/* 仅对App组件根元素下的label生效 */
.app-wrap label {
  color: blue;
}

然后在App.js中给根容器添加该类：

import styles from "./index.module.css";

function App() {
  return (
    <div className={styles["app-wrap"]}>
      <label>App内的label</label>
      <div className={styles["my-class"]}>App内的红色文本</div>
    </div>
  );
}

export default App;

编译后该样式会被处理为类似._src_index_module__app-wrap label的形式，仅匹配App组件根元素下的label，不会影响其他组件。

方法二：使用:local()明确标记局部化标签 #

如果不想额外添加容器类，可通过CSS模块的:local()语法，直接将标签选择器转化为局部类：

.my-class {
  color: red;
}

/* 明确将label转为局部选择器 */
:local(label) {
  color: blue;
}

此时编译后的label会生成唯一局部类名，需要在App.js的label元素上手动绑定：

<label className={styles.label}>App内的label</label>

问题根源说明 #

CSS模块默认仅对类选择器、ID选择器添加唯一前缀以实现局部作用域，而label这类标签选择器属于全局选择器，编译时不会被处理，因此会作用于页面内所有同类型标签，这就是Bpp组件的label被影响的原因。

内容的提问来源于stack exchange，提问作者SoftTimur