React使用CSS Modules时如何根据状态值设置组件对应文本颜色

你可以按以下步骤实现，完全适配CSS Modules的样式隔离规则，不需要额外依赖：

• 抽离重复的状态判断逻辑为独立变量，避免多处维护判断规则
• 建立状态值和CSS Modules类名的映射表，直接根据当前状态取对应样式类
• 将样式类绑定到组件对应节点上

修改后的组件代码 #

// 提前计算当前状态
const status = verificationCompleted 
  ? "Verified" 
  : !verificationStarted 
    ? "Not Started" 
    : "In Process";

// 状态-样式映射表
const statusStyleMap = {
  "Verified": styles.verified,
  "Not Started": styles.notStarted,
  "In Process": styles.inProcess
};

<Box
  label={foo}
  description={status}
  onClick={bar}
  // 若你的Box组件用className接收自定义样式直接用这行，如果属性名是customClass/styleClass替换成对应名称即可
  className={statusStyleMap[status]}
/>

如果你的Box组件不会把className透传到description对应的文本节点，直接把description改成带样式的JSX节点即可，不需要修改Box组件源码：

<Box
  label={foo}
  description={<span className={statusStyleMap[status]}>{status}</span>}
  onClick={bar}
/>

对应CSS Modules文件（例：Component.module.css）代码 #

.verified {
  color: #16a34a; /* 匹配Verified状态的绿色 */
}

.notStarted {
  color: #dc2626; /* 匹配Not Started状态的红色 */
}

.inProcess {
  color: #ea580c; /* 匹配In Process状态的橙色 */
}

你可以根据实际设计稿调整色值，也可以在类里补充背景色、边框色等其他需要随状态变化的样式规则。

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