React中如何动态修改类名？CSS Modules拼接失效问题

你遇到的问题核心是CSS Modules会将类名编译为唯一哈希值，直接用字符串拼接的"card"、"active"这些名称，并不是DOM上实际生效的类名，自然无法匹配到样式。以下是具体的解决步骤：

1. 正确引入CSS Modules #

首先要把样式文件作为模块引入，拿到编译后的类名字典：

// 替换原来的 import "./Board.module.css"
import classes from "./Board.module.css"

此时classes对象中存储的是编译后的类名映射，比如classes.card对应实际DOM上的Board_card_xxxx类名。

2. 动态组合类名的正确方式 #

不能直接拼接字符串，要从classes中取出对应类名，通过数组收集后拼接：

import classes from "./Board.module.css"

const Card = (props) => {
  // 收集需要的类名，自动过滤空值
  const classList = [
    classes.card, // 基础类必选
    props.item.stat && classes.active, // 存在状态时添加active类
    props.item.stat && classes[props.item.stat] // 根据状态添加wrong/correct类
  ].filter(Boolean);

  return (
    <div className={classList.join(' ')} onClick={() => props.clickHandler(props.id)}>
      <label>{props.item.content}</label>
    </div>
  );
};

export default Card;

关键说明 #

• 变量类名（比如wrong/correct）必须用方括号访问：classes[props.item.stat]，因为点语法只能读取固定的属性名
• filter(Boolean)会自动移除数组中的空字符串、undefined等假值，避免生成多余的空格
• 你的CSS代码不需要修改，CSS Modules会自动处理.card.active这类组合选择器，将其编译为哈希类名的组合（比如.Board_card_xxxx.Board_active_xxxx）

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