React中body标签无法用var()动态切换背景/字体颜色求助

你遇到的问题核心是CSS变量的作用域与继承规则限制：

• 你将data-theme属性绑定在了App组件内部的<div>上，而这个<div>是<body>的子元素
• CSS变量仅能从父元素向子元素继承，子元素上定义的变量无法被父元素（<body>）读取
• 用*选择器时，*匹配了所有子元素，这些子元素能继承<div>的变量，视觉上看起来模式生效；手动写颜色是直接给<body>赋值，自然能正常修改

推荐两种可靠的修改方式：

方法1：将data-theme绑定到body标签（最常用） #

修改React代码，直接操作<body>的属性，让CSS变量定义在<body>自身上：

import React, { useState, useEffect } from 'react';
import ToggleDarkMode from './ToggleDarkMode';
import './index.css';

function App() {
  const [darkMode, setDarkMode] = useState(false)

  // 监听darkMode变化，同步更新body的data-theme属性
  useEffect(() => {
    document.body.setAttribute('data-theme', darkMode ? 'dark' : 'light')
  }, [darkMode])

  const toggleDarkMode = () => {
    setDarkMode(!darkMode)
  }

  return (
    <div>
     <ToggleDarkMode darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
     <h1>Hello</h1>
     <h2>world</h2>
    </div>
  );
}

export default App;

原CSS代码无需修改，此时<body>能直接读取自身data-theme属性对应的变量，背景色和文字颜色会正常切换。

方法2：调整CSS选择器（兼容性有限，仅作参考） #

若不想修改React代码，可使用:has伪类让<body>感知子元素的主题属性（注意：:has仅支持现代浏览器）：

:root {
  --bg-color-light: #fff;
  --font-color-light: #424242;
  --bg-color-dark: #161625;
  --font-color-dark: #e1e1ff;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Courier New', Courier, Arial, Helvetica, sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color)
}

/* 替换原[data-theme]规则 */
body:has([data-theme='light']) {
  --bg-color: var(--bg-color-light);
  --font-color: var(--font-color-light)
}

body:has([data-theme='dark']) {
  --bg-color: var(--bg-color-dark);
  --font-color: var(--font-color-dark)
}

暗黑模式通常推荐将主题属性绑定到<html>或<body>标签上，这样整个文档的所有元素都能方便继承主题变量，避免作用域问题。

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