React CSS Modules中如何为类下所有div设置样式？

当然可以！你只需要在CSS Modules文件里用后代选择器指定父类下的所有div元素就行，之前没生效大概率是写法问题，给你具体操作步骤：

1. 编写正确的Error.module.css #

在CSS模块文件中，通过「父类选择器 + 空格 + div」的格式，选中目标父类下的所有div后代元素：

/* Error.module.css */
.error {
  /* 可选：给父容器加基础样式，比如内边距 */
  padding: 1rem;
}

/* 选中.error类下的所有div后代元素（包括嵌套的深层div） */
.error div {
  background-color: #ffcccc; /* 这里填你想要的填充颜色 */
  color: #d8000c;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 4px;
}

/* 如果只想选中.error的直接子div（排除嵌套在更深层的div），用直接子选择器 */
.error > div {
  border: 1px solid #d8000c;
}

2. 在JSX中正确应用类名 #

确保父容器已经加上了styles.error类：

// error.jsx
import styles from './Error.module.css';

export default function Error() {
  return (
    <div className={styles.error}>
      <div>这是第一个会被染色的div</div>
      <div>这是第二个
        <div>这个嵌套的div也会被.error div选择器选中（如果用的是后代选择器）</div>
      </div>
    </div>
  );
}

为什么之前没生效？ #

CSS Modules默认是局部作用域，如果你直接写div { ... }，它只会匹配类名为div的元素（而非<div>标签）。必须通过「父类的局部选择器 + 标签选择器」的组合，才能精准选中目标元素。

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