如何在动态组件中应用CSS变量解决重复引入样式冲突？

你当前的问题出在全局CSS变量上：--color和--size被挂载在:root（全局的html元素）上，两个CircleComponent渲染时，第二个组件的useEffect会覆盖第一个组件设置的全局变量，最终所有组件都使用最后一次设置的变量值。

以下是不依赖第三方库的几种解决方案：

方案1：使用内联样式（最简单直接） #

直接通过React的style属性给组件元素设置动态样式，完全避免变量冲突：

修改组件代码：

import "../myCss.css"

const CircleComponent = ({ size = 40, color = 'black' }) => {
  return (
    <div 
      className="circle"
      style={{
        width: `${size}px`,
        height: `${size}px`,
        backgroundColor: color
      }}
    />
  )
}

简化CSS（保留固定样式，移除全局变量）：

.circle{
  border-radius: 50%;
}

方案2：给组件元素设置局部CSS变量 #

把CSS变量的作用域从全局缩小到组件自身的DOM元素，确保每个组件的变量独立：

修改组件代码（使用useRef获取元素，设置局部变量）：

import "../myCss.css"
import { useEffect, useRef } from 'react';

const CircleComponent = ({ size, color }) => {
  const circleRef = useRef(null);

  useEffect(() => {
    if (!circleRef.current) return;
    const element = circleRef.current;
    
    if (color) element.style.setProperty('--color', color);
    if (size) element.style.setProperty('--size', `${size}px`);
  }, [size, color]) // 加入依赖，props变化时自动更新样式

  return <div ref={circleRef} className="circle"></div>
}

CSS保持原有代码不变即可，此时var(--color)和var(--size)会优先读取当前元素上的变量值，不会互相覆盖。

方案3：内联定义CSS变量（简洁高效） #

直接在元素的style属性中定义局部CSS变量，无需useEffect：

修改组件代码：

import "../myCss.css"

const CircleComponent = ({ size = 40, color = 'black' }) => {
  return (
    <div 
      className="circle"
      style={{
        '--size': `${size}px`,
        '--color': color
      }}
    />
  )
}

CSS依然使用原有代码，每个组件的style里的变量是独立的，不会冲突。

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