React中多组件实例下如何避免CSS自定义属性被覆盖？

你遇到的核心问题是把CSS自定义属性设置在了全局的根元素（documentElement）上，所有组件实例都会读取同一个全局变量，后面的组件会覆盖之前的变量值，自然会导致所有组件的样式被修改。

这里有几种简单有效的解决方法：

方法一：将自定义属性绑定到组件自身的DOM节点 #

不要在全局根元素上设置变量，而是把--children-count绑定到当前组件的根DOM元素上，这样每个组件实例的变量都是独立的，不会互相干扰。

1. 给组件根元素添加ref（以React为例）：

import { useRef, useEffect } from 'react';

function YourComponent(props) {
  const componentRef = useRef(null);
  const childrenCount = Children.count(props.children);

  useEffect(() => {
    if (componentRef.current) {
      // 给组件自身根节点设置自定义属性
      componentRef.current.style.setProperty('--children-count', childrenCount);
    }
  }, [childrenCount]);

  return (
    <div ref={componentRef} className={`your-component ${props.isActive ? 'active' : ''}`}>
      <div className="buttonGroup">
        {/* 子元素内容 */}
      </div>
    </div>
  );
}

2. CSS保持原有写法即可，因为.buttonGroup会优先读取父元素（组件根节点）的自定义属性，而不是全局的：

&.active {
  .buttonGroup {
    max-height: calc(var(--children-count) * 30px);
  }
}

方法二：直接使用行内样式（更简单直接） #

跳过CSS自定义属性，直接把计算后的max-height作为行内样式传给目标元素，每个组件实例的行内样式都是独立的，完全不会有覆盖问题。

function YourComponent(props) {
  const childrenCount = Children.count(props.children);
  const isActive = props.isActive;

  return (
    <div className={`your-component ${isActive ? 'active' : ''}`}>
      <div 
        className="buttonGroup" 
        style={{ 
          maxHeight: isActive ? `${childrenCount * 30}px` : '0',
          // 可保留过渡动画维持交互体验
          transition: 'max-height 0.3s ease'
        }}
      >
        {/* 子元素内容 */}
      </div>
    </div>
  );
}

方法三：使用唯一命名的自定义属性（适合特殊场景） #

如果一定要保留CSS变量的写法，可以给每个组件实例生成唯一的属性名，比如结合组件的唯一ID或key：

function YourComponent(props) {
  const componentRef = useRef(null);
  const childrenCount = Children.count(props.children);
  // 生成唯一属性名，比如用组件的key或自定义id
  const uniquePropName = `--children-count-${props.id || props.key}`;

  useEffect(() => {
    if (componentRef.current) {
      componentRef.current.style.setProperty(uniquePropName, childrenCount);
    }
  }, [childrenCount, uniquePropName]);

  return (
    <div ref={componentRef} className={`your-component ${props.isActive ? 'active' : ''}`}>
      <div className="buttonGroup" style={{ '--unique-count': `var(${uniquePropName})` }}>
        {/* 子元素内容 */}
      </div>
    </div>
  );
}

对应的CSS调整为读取这个唯一变量：

&.active {
  .buttonGroup {
    max-height: calc(var(--unique-count) * 30px);
  }
}

这种方式相对繁琐，仅适合必须依赖CSS变量的特殊场景，一般优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者Pa3k.m