React中使用use-dark-mode切换主题时动态修改指定区块背景色的问题

我来帮你搞定这个问题！其实核心就是利用use-dark-mode切换时给<body>添加的dark-mode/light-mode类，通过CSS的层级选择器来针对不同主题下的目标区块设置样式。下面是具体的实现步骤：

1. 直接修改目标区块的CSS样式 #

打开你的style.css，在现有.content_container样式下方，添加暗黑模式下的专属样式：

@import '../../App.css';
.content_container {
  margin: auto;
  width: 500px;
  max-width: 100%;
  background: orange; /* 浅色模式默认背景色 */
}
.content_container h3 {
  text-align: center;
}

/* 暗黑模式下的区块样式 */
body.dark-mode .content_container {
  background: red;
}

这样一来，当你点击暗黑模式按钮时，use-dark-mode会给<body>加上dark-mode类，这个层级选择器就会生效，把content_container的背景改成红色；切回浅色模式时，body的dark-mode类被移除，区块就会恢复原来的橙色背景。

2. （可选）用CSS变量优化样式维护 #

如果你希望后续更方便地修改颜色，可以利用你已经在App.css里定义的CSS变量，把颜色值抽离出来，让代码更易维护：

首先修改App.css，添加暗黑模式下的变量值：

body.light-mode {
  background-color: #fff;
  color: #333;
  transition: background-color 0.3s ease;
  --content-bg: orange; /* 浅色模式区块背景变量 */
}
body.dark-mode {
  background-color: #1a1919;
  color: #999;
  --content-bg: red; /* 暗黑模式区块背景变量 */
}
:root {
  --color-orange: orange;
}

然后修改style.css，直接引用这个变量：

@import '../../App.css';
.content_container {
  margin: auto;
  width: 500px;
  max-width: 100%;
  background: var(--content-bg);
}
.content_container h3 {
  text-align: center;
}

这种方式的好处是，以后要调整颜色只需要修改App.css里的变量值，不用再找各个区块的样式，扩展性更好。

验证效果 #

现在点击你的明暗切换按钮，应该就能看到content_container的背景色跟着主题一起变化了——浅色模式是橙色，暗黑模式是红色，完全符合你的需求！

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