如何在动态组件中将CSS变量应用于动态CSS class

Question

我有库组件，并且创建了一些组件，但是当在具有不同 styles 的父组件中导入两次组件时，我遇到了 CSS 问题。

import "../myCss.css"
const CircleComponent = ({size , color}) => {
  useEffect(() => {
    if (color)
      document.documentElement.style.setProperty(
        "--color",
        color
      );
    if(size) {
      document.documentElement.style.setProperty(
        "--size",
        `${size}px`
      );
    }
  }, [])

  return <div className="circle"></div>
}

CSS：

root: {
 --color: black;
 --size: 40px
}

.circle{
  height: var(--size);
  width: var(--size);
  background-color: var(--color);
  border-radius: 50%;
}

当我导入这个组件并设置不同的颜色时：

<>
 <CircleComponent color="red" />
 <CircleComponent color="blue" />
</>

...两个组件都变成蓝色！

我无法使用样式模块，有很多错误！

我怎样才能最好地使用动态 CSS？ 没有另一个图书馆？

Answer 1

因为您修改了公共顶部document.documentElement上的 CSS 变量/属性，它会影响您的所有元素。

如果你只想在你的 React 组件上应用它，那么只需将它设置在该组件 Element 上。 要获取此类元素的句柄，您可以使用useRef挂钩：

const CircleComponent = ({ size, color }) => {

  const ref = useRef(null);

  useEffect(() => {
    // Modify the property on the element or a parent,
    // not on the common top document
    if (color) ref.current.style.setProperty("--color", color);
    if (size) {
      ref.current.style.setProperty("--size", `${size}px`);
    }
  }, []);

  // Attach the ref with the ref special prop
  return <div ref={ref} className="circle"></div>;
};

演示： https://codepen.io/ghybs/pen/WNKdZro

---

顺便说一句，你的 CSS: :root伪类有一个冒号:作为第一个字符，而不是最后一个。