动态切换className失效：dark类未触发问题求助

核心问题：CSS选择器错误 #

你当前的CSS中，.normColor .dark是后代选择器，它只会匹配normColor类元素内部的dark类子元素，但你的需求是给同一个元素切换/追加dark类来改变背景色，这个选择器完全不符合场景。

修正CSS代码 #

将后代选择器改为类组合选择器，让同一个元素同时拥有normColor和dark类时，应用深色背景样式：

.normColor{
  background-color: #f3f3f3;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

/* 修改选择器，去掉空格改为组合选择器 */
.normColor.dark{
  background-color: #232A4E;
}

（宽高、margin属性可省略，会继承基础类的样式）

确认动态类名写法 #

确保你的三元表达式给目标元素保留基础类normColor，并根据workWrapper的值追加dark类，示例：

<div className={`normColor ${workWrapper ? 'dark' : ''}`}>
  {/* 组件内容 */}
</div>

额外检查点 #

• 用console.log(workWrapper)验证状态值是否正确切换
• 排查是否有更高优先级的CSS规则（如行内样式、ID选择器）覆盖了背景色设置

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