如何在ReactJS中访问:root元素以修改CSS变量？

嘿，完全不用纠结ID的问题！:root本质上对应的就是HTML文档的根元素（也就是<html>标签），直接通过document.documentElement就能访问到它，操作CSS变量超简单的，给你几个实用的方法：

• 获取:root中CSS变量的值
  用getComputedStyle拿到根元素的计算样式，再通过getPropertyValue提取变量值，记得用trim()去掉多余的空格哦：

  const rootStyles = getComputedStyle(document.documentElement);
  const primaryColor = rootStyles.getPropertyValue('--primary-color').trim();
  console.log('当前主题色:', primaryColor);
  

• 修改:root中CSS变量的值
  直接调用document.documentElement.style.setProperty就能给变量赋值，一步到位：

  // 把--primary-color改成红色
  document.documentElement.style.setProperty('--primary-color', '#ff0000');
  

• React组件中的响应式应用
  在React里可以结合状态和useEffect，实现变量随状态变化自动更新，比如做个主题切换功能：

  import { useState, useEffect } from 'react';
  
  function ThemeSwitcher() {
    const [isDark, setIsDark] = useState(false);
  
    useEffect(() => {
      // 根据状态切换根元素的背景色和文字色变量
      const bgColor = isDark ? '#1e1e1e' : '#ffffff';
      const textColor = isDark ? '#f5f5f5' : '#333333';
      
      document.documentElement.style.setProperty('--page-bg', bgColor);
      document.documentElement.style.setProperty('--text-color', textColor);
    }, [isDark]);
  
    return (
      <div style={{ backgroundColor: 'var(--page-bg)', color: 'var(--text-color)', minHeight: '100vh' }}>
        <button onClick={() => setIsDark(!isDark)}>
          {isDark ? '切换浅色模式' : '切换深色模式'}
        </button>
        <h1>当前主题：{isDark ? '深色' : '浅色'}</h1>
      </div>
    );
  }
  
  export default ThemeSwitcher;
  

• 小技巧：重置CSS变量
  如果需要把变量恢复到样式表中的初始值，用removeProperty就行：

  document.documentElement.style.removeProperty('--primary-color');
  

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