React CSS Module中CSS选择器失效问题求助

问题根源 #

1. 类名拼写错误：你的JSX中使用的是render1类名，但CSS里定义的是render-1，二者不一致导致选择器无法匹配。
2. CSS Module作用域特性：启用CSS Module后，.carouselContainer会被编译成带唯一哈希后缀的类名（例如carouselContainer_xyz789），而你CSS中的.carouselContainer.render-1选择器是在查找同时拥有未哈希的carouselContainer和render-1类的元素，这和实际DOM中的类名完全不匹配。

解决方法 #

方法一：将状态类也纳入CSS Module（推荐）

把状态类改为模块化类，保持类名拼写一致：

CSS Module代码：

.carouselContainer > * {
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
}

/* 类名统一为render1，和JSX保持一致 */
.carouselContainer.render1 > * {
  width: calc(100% - 10rem);
}

JSX代码：

import styles from './mycss.module.css'
import classNames from 'classnames'

<div className={classNames(styles.carouselContainer, styles.render1)}>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>

这样两个类都会被CSS Module处理为带哈希的类名，选择器能精准匹配DOM元素。

方法二：保留全局类（适合第三方类/全局状态类）

如果需要render-1作为全局类使用，用:global()伪类包裹全局类选择器，同时修正类名拼写：

CSS Module代码：

.carouselContainer > * {
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
}

/* 用:global()包裹全局类，避免被哈希处理 */
.carouselContainer:global(.render-1) > * {
  width: calc(100% - 10rem);
}

JSX代码：

import styles from './mycss.module.css'
import classNames from 'classnames'

/* 修正类名为render-1，和CSS定义一致 */
<div className={classNames(styles.carouselContainer, 'render-1')}>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>

:global()会让内部的类名保持原始状态，不会被添加哈希，这样.carouselContainer（哈希后）和:global(.render-1)（原始类名）的组合选择器就能正确匹配DOM元素。

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