如何为每个React组件设置独立的CSS变量？

你当前的问题根源是把--fillColor这个CSS变量设置在了全局根元素document.documentElement上，所有组件实例都会共享这个全局变量，导致修改时所有组件的样式被统一改变。下面是几种可行的解决办法：

方案一：直接使用行内样式 #

这是最简单直接的方式，给每个组件的目标元素单独设置行内样式，确保每个实例样式独立：

import React from "react";

export function Gauge(props) {
    return (
        <div className="gauge" style={{ position: 'relative' }}>
             <div className="gaugeFill" style={{ background: props.color }}></div>
        </div>
    );
}

对应的CSS可以简化：

.gaugeFill {
    width: 100%;
    position: absolute;
    bottom: 0;
}

注意：给.gauge添加position: relative，避免绝对定位的.gaugeFill脱离组件容器布局。

方案二：组件级CSS变量（推荐） #

把CSS变量绑定到组件的根元素上，而不是全局，这样每个组件实例的变量都是独立的：

import React from "react";

export function Gauge(props) {
    return (
        <div className="gauge" style={{ 
            position: 'relative',
            '--fillColor': props.color 
        }}>
             <div className="gaugeFill"></div>
        </div>
    );
}

CSS保持你原来的写法即可，因为.gaugeFill会继承父组件.gauge的变量：

.gaugeFill {
    width: 100%;
    position: absolute;
    bottom: 0px;
    background: var(--fillColor);
}

方案三：使用CSS-in-JS库（适合大型项目） #

如果项目需要更复杂的样式隔离，可以用styled-components这类CSS-in-JS库，直接通过props传递样式值：

import styled from 'styled-components';

// 定义带样式的组件
const GaugeContainer = styled.div`
    position: relative;
`;

const GaugeFill = styled.div`
    width: 100%;
    position: absolute;
    bottom: 0;
    background: ${props => props.fillColor};
`;

export function Gauge(props) {
    return (
        <GaugeContainer>
             <GaugeFill fillColor={props.color} />
        </GaugeContainer>
    );
}

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