React.js通过修改App类名切换明暗主题时组件CSS样式不生效问题

问题原因 #

你使用了带.module.css后缀的CSS Modules文件，这类文件内定义的所有类名默认会被打包工具编译为带唯一哈希后缀的局部类名，避免全局样式冲突。你在todo.module.css中写的.light .taskCard选择器会被编译为类似.xxx_light__xxx .xxx_taskCard__xxx的格式，但你挂载在App组件上的.light/.dark是全局类名，无法匹配编译后的局部.light类，因此样式不生效。

解决方案 #

方案1：标记主题类名为全局类（最便捷的修改方式） #

在CSS Modules文件中使用:global()语法包裹主题类名，告诉打包工具该类名不需要编译为局部类：

/* 修改后的todo.module.css */
.taskCard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 340px;
  height: 260px;
  min-width: 340px;
  min-height: 260px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
}

/* 用:global包裹全局主题类 */
:global(.light) .taskCard {
  background-color: white;
}

:global(.dark) .taskCard {
  background-color: #2B2E30;
}

修改后编译出的选择器格式为.light .xxx_taskCard__xxx，可以正确匹配App组件上的全局主题类。

方案2：主题类挂载到根节点 #

将主题类直接挂载到html或body全局根节点，所有组件都可以直接匹配主题：

// 修改App.js中的主题切换逻辑，新增初始化逻辑
import { useState, useEffect } from "react";

// ...其他代码不变

function App() {
  const [theme, setTheme] = useState("light");

  // 初始化时给根节点加主题类
  useEffect(() => {
    document.documentElement.className = theme;
  }, [theme])

  const switchTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  // ...return部分代码不变
}

后续所有CSS Modules中的主题选择器都可以用:global(.light)的格式编写，无需修改App组件的className。

方案3：主题样式放在全局CSS文件 #

把所有主题相关的样式统一放到全局的index.css中，全局CSS的类名不会被编译，你原来的写法可以直接生效：

/* 新增到index.css的代码 */
.light .taskCard {
  background-color: white;
}
.dark .taskCard {
  background-color: #2B2E30;
}

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