React中useContext切换主题时CSS选择器不生效问题排查

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

你写的app false是完全错误的类选择器写法——类选择器必须以.开头，且多个类选择器连写时不能加空格（空格代表后代选择器，不是同时匹配多个类）。正确的写法应该是：

• 匹配默认浅色模式的元素：.app
• 匹配深色模式的元素：.app.dark-theme（同时拥有app和dark-theme类的元素）

修正后的完整CSS代码 #

同时优化变量名让语义更清晰，顺便修复calc的语法错误：

:root {
  --font-family-title: "PaytoneOne-Regular";
  --font-family-text: "JosefinSans-Regular", sans-serif;
  --font-color-light: black;
  --font-color-dark: white;
  --background-gradient-light: linear-gradient(
    to bottom,
    #73bde6,
    #8ed6d7,
    #adeae434
  );
  --background-gradient-dark: linear-gradient(to bottom, #07399c, #95aadc);
}

.buttonDarkMode {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  min-height: calc(100vh - 117px); /* calc运算符前后必须加空格，否则解析失败 */
}

/* 浅色模式默认样式 */
.app {
  background: var(--background-gradient-light);
  color: var(--font-color-light);
}

/* 深色模式样式 */
.app.dark-theme {
  background: var(--background-gradient-dark);
  color: var(--font-color-dark);
}

额外说明 #

从你的截图来看，React的状态切换已经生效（类名正确从app变成app dark-theme），所以只需要修正CSS选择器即可。如果后续需要切换更多样式，直接在.app.dark-theme选择器下添加对应属性就行。

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