CSS Modules中三元运算符绑定className样式不生效如何解决

问题场景 #

• 实现三个按钮的Tab切换逻辑：点击任意按钮渲染对应匹配组件，同时当前激活按钮切换紫色背景，标识选中状态
• 现有逻辑下组件可按点击规则正常渲染，但按钮的激活背景色样式始终无法生效

现有错误实现代码 #

<div className="App">
  <div className ="App-btns">
    <button onClick = {fPro} className = {`${styles[{pro ? "active" : null}]}`}>Profile</button>
    <button onClick = {fSec} className = {`${styles[{sec ? "active" : null}]}`}>Security</button>
    <button onClick = {fVer} className = {`${styles[{ver ? "active" : null}]}`}>Verification</button>
  </div>
  <div className = "App-render">
    {pro && <Profile/>}
    {sec && <Security/>}
    {ver && <Verification/>}
  </div>
</div>

现有逻辑说明 #

• 定义了pro、sec、ver三个布尔状态变量，默认仅pro初始值为true，页面首次加载时默认渲染Profile组件
• 编写了fPro、fSec、fVer三个点击事件函数，点击对应按钮时将匹配的状态变量设为true，其余两个状态变量设为false
• 预期通过三元运算符判断状态值，状态为true时给按钮绑定active类名，触发激活样式，但实际样式未生效

已编写的激活样式 #

.active{
  background-color: purple;
  border: 1px solid purple;
}

问题根因 #

• 类名绑定写法存在语法错误：代码中${styles[{pro ? "active" : null}]}的写法完全不符合对象属性取值规则，给styles传入的是一个临时创建的内联对象作为属性键，无论三元返回"active"还是null，取到的属性值都是undefined，等于根本没有给按钮绑定上有效的类名
• 若项目使用CSS Modules，直接写字符串类名"active"无法匹配到编译后带哈希值的类名，也会导致样式失效

修复方案 #

场景1：使用普通全局CSS（非CSS Modules） #

去掉错误的styles对象取值和多余的对象包裹，直接按布尔值拼接类名即可，修正后代码：

<div className="App">
  <div className="App-btns">
    <button onClick={fPro} className={pro ? "active" : ""}>Profile</button>
    <button onClick={fSec} className={sec ? "active" : ""}>Security</button>
    <button onClick={fVer} className={ver ? "active" : ""}>Verification</button>
  </div>
  <div className="App-render">
    {pro && <Profile/>}
    {sec && <Security/>}
    {ver && <Verification/>}
  </div>
</div>

原有.active全局样式无需修改，即可正常生效。

场景2：使用CSS Modules #

先确认样式文件为*.module.css命名格式，从导入的styles对象中读取编译后的类名，修正后代码：

// 引入CSS Modules文件
import styles from './App.module.css';

<div className={styles.App}>
  <div className={styles["App-btns"]}>
    <button onClick={fPro} className={pro ? styles.active : ""}>Profile</button>
    <button onClick={fSec} className={sec ? styles.active : ""}>Security</button>
    <button onClick={fVer} className={ver ? styles.active : ""}>Verification</button>
  </div>
  <div className={styles["App-render"]}>
    {pro && <Profile/>}
    {sec && <Security/>}
    {ver && <Verification/>}
  </div>
</div>

提示：如果需要给按钮同时绑定基础类名和激活类名，直接用模板字符串拼接即可，示例：className={base-btn ${pro ? "active" : ""}}，不要在属性访问时包裹无意义的对象结构。

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