如何在React中动态更新CSS变量（不直接操作document）

方案1：纯CSS状态切换（无需JS） #

如果可以通过用户交互（点击、聚焦等）触发样式变更，可利用CSS伪类或兄弟选择器实现变量值的切换，全程无需操作DOM。

比如用隐藏复选框作为状态开关，通过它的:checked状态修改body的变量值：

/* 初始变量定义 */
body {
  --color: blue;
}

/* 隐藏状态开关 */
#color-toggle {
  position: absolute;
  opacity: 0;
}

/* 开关选中时更新变量 */
#color-toggle:checked ~ body {
  --color: red;
}

/* 测试依赖元素 */
.test-text {
  color: var(--color);
  font-size: 1.2rem;
}

对应的HTML结构：

<input type="checkbox" id="color-toggle">
<label for="color-toggle">点我切换颜色</label>
<body>
  <p class="test-text">我的颜色会跟着变</p>
</body>

用户点击标签时，复选框状态变化会自动触发body变量更新，所有依赖--color的元素同步变色。

方案2：框架响应式状态绑定（无直接DOM操作） #

在React、Vue这类前端框架中，可通过状态管理间接修改CSS变量，无需调用原生document API。

React 示例 #

import { useState } from 'react';

function ColorDemo() {
  const [themeColor, setThemeColor] = useState('blue');

  return (
    <body style={{ '--color': themeColor }}>
      <p style={{ color: 'var(--color)' }}>我会随状态变色</p>
      <button onClick={() => setThemeColor('red')}>切换为红色</button>
    </body>
  );
}

通过useState维护颜色状态，点击按钮更新状态后，框架自动处理DOM样式变更，全程无需直接操作document。

Vue 示例 #

<template>
  <body :style="{ '--color': themeColor }">
    <p :style="{ color: 'var(--color)' }">我会随状态变色</p>
    <button @click="themeColor = 'red'">切换为红色</button>
  </body>
</template>

<script setup>
import { ref } from 'vue';
const themeColor = ref('blue');
</script>

方案3：Shadow DOM环境下的变量修改 #

如果代码运行在Shadow DOM隔离环境中，可直接在Shadow根节点上定义和修改变量，完全不涉及主document操作：

class ColorSwitcher extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    
    // 初始变量设置
    shadowRoot.style.setProperty('--color', 'blue');

    // 创建展示元素
    const textEl = document.createElement('p');
    textEl.textContent = '我在Shadow DOM里变色';
    textEl.style.color = 'var(--color)';

    // 创建切换按钮
    const switchBtn = document.createElement('button');
    switchBtn.textContent = '改成红色';
    switchBtn.addEventListener('click', () => {
      shadowRoot.style.setProperty('--color', 'red');
    });

    shadowRoot.append(textEl, switchBtn);
  }
}

customElements.define('color-switcher', ColorSwitcher);

使用时只需在HTML中插入<color-switcher></color-switcher>，点击按钮即可更新Shadow DOM内的变量，不会影响主文档。

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