ReactJS中如何获取变量值修改body/root元素的CSS样式？

这个是最契合你现有代码逻辑的实现，你只需要在项目的**顶层组件（通常是App.jsx或者你的themeContext的Provider组件）**里加一段useEffect监听逻辑即可：

import { useContext, useEffect } from 'react'
import themeContext from "../context/themes/themeContext";

function App() {
  const { theme } = useContext(themeContext)

  useEffect(() => {
    // 对应你的theme判断逻辑修改body背景色
    if (theme.light) {
      document.body.style.backgroundColor = 'white'
      document.body.style.color = 'black'
    } else if (theme.dark) {
      document.body.style.backgroundColor = '#2d2d2d'
      document.body.style.color = 'whitesmoke'
    } else if (theme.anotherDark) {
      document.body.style.backgroundColor = 'black'
      document.body.style.color = '#84ff00'
    }
    // 如果要改root元素（#root）就用下面的写法
    // document.getElementById('root').style.backgroundColor = '对应颜色'
  }, [theme]) // 依赖项设为theme，切换时自动触发

  // 剩下的你原来的App组件逻辑
}

只要theme切换，全局的body背景色就会自动更新，不需要每个组件单独处理。

这个方案可以让你直接在App.css里通过CSS变量拿到theme对应的颜色，不需要每个组件写内联样式：

1. 先在App.css里定义全局CSS变量：

/* App.css */
:root {
  --bg-color: white;
  --text-color: black;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  /* 保留你原来的body其他样式 */
}

/* 其他组件也可以直接复用这两个变量，比如你Home组件里的noteStyle就不用写死了 */
.note-container {
  background-color: var(--bg-color);
  color: var(--text-color);
}

2. 还是在顶层组件的useEffect里修改根元素的CSS变量值即可：

import { useContext, useEffect } from 'react'
import themeContext from "../context/themes/themeContext";

function App() {
  const { theme } = useContext(themeContext)

  useEffect(() => {
    const root = document.documentElement
    if (theme.light) {
      root.style.setProperty('--bg-color', 'white')
      root.style.setProperty('--text-color', 'black')
    } else if (theme.dark) {
      root.style.setProperty('--bg-color', '#2d2d2d')
      root.style.setProperty('--text-color', 'whitesmoke')
    } else if (theme.anotherDark) {
      root.style.setProperty('--bg-color', 'black')
      root.style.setProperty('--text-color', '#84ff00')
    }
  }, [theme])

  // 保留你原来的组件逻辑
}

用这个方案的话，你Home组件里的noteStyle也可以删掉，直接给外层div加className="note-container"就行，样式都统一在CSS里管理，后续改主题色只需要改一处即可。

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