React中切换明暗主题时如何修改表单背景颜色？

以下几种方案都能实现需求，你可以根据项目情况选择：

方案一：利用body的主题类名编写嵌套CSS #

你已经通过useEffect把主题类名加到了document.body上，直接在CSS里基于body的类名来覆盖表单背景色即可：

修改后的CSS代码：

.form-container {
  width: 600px;
  height: 750px;
  border-radius: 8px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

/* 亮色主题下的表单背景 */
body.light .form-container {
  background-color: rgb(54, 118, 139);
}

/* 暗色主题下的表单背景 */
body.dark .form-container {
  background-color: rgb(30, 60, 70); /* 换成你想要的暗色背景色 */
}

这种方式不需要修改React组件代码，直接扩展CSS就行。

方案二：给表单动态绑定主题类名 #

在渲染表单组件时，把当前theme状态加到表单的className里，再通过CSS针对不同类名设置样式：

1. 修改表单元素的className（假设你的表单组件在App里） #

// 在App组件的return里添加表单元素
return (
  <div className={`App ${theme}`}>
    <button onClick={toggleTheme}>Toggle Theme</button>
    {/* 给表单容器加上theme类名 */}
    <div className={`form-container ${theme}`}>
      {/* 表单内容 */}
    </div>
  </div>
);

2. 修改CSS代码 #

.form-container {
  width: 600px;
  height: 750px;
  border-radius: 8px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.form-container.light {
  background-color: rgb(54, 118, 139);
}

.form-container.dark {
  background-color: rgb(30, 60, 70);
}

方案三：使用CSS变量（推荐，更易维护） #

用CSS变量统一管理主题色，后续修改或扩展主题更方便：

1. 修改全局CSS（或App组件的CSS） #

/* 定义默认变量（亮色主题） */
body.light {
  --form-bg-color: rgb(54, 118, 139);
}

/* 暗色主题下修改变量 */
body.dark {
  --form-bg-color: rgb(30, 60, 70);
}

.form-container {
  width: 600px;
  height: 750px;
  background-color: var(--form-bg-color); /* 使用变量 */
  border-radius: 8px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

这种方式只需要在body的不同主题类下修改变量值，所有用到该变量的元素都会自动更新，适合多组件多元素的主题切换场景。

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