How to apply CSS variable on dynamic CSS class in dynamic component

Question

I have library components, and when I create some components, I have a problem with CSS when importing a component twice in a parent component with different styles.

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%;
}

When I import this component and set a different color :

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

...both components get blue color!

I couldn't use the style module, have many errors!

How can I correctly use dynamic CSS here without another library?

ghybs · Accepted Answer · 2023-01-20 19:19:28Z

Because you modify the CSS variable/property on the common top document.documentElement, it will affect all your Elements.

If you want to apply it only on your React component, then simply set it on that component Element. To get a handle to such Element, you can use the useRef hook:

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>;
};

Demo: https://codepen.io/ghybs/pen/WNKdZro

BTW, there is a typo in your CSS: :root pseudo-class has the colon : as 1st character, not last.

Collectives™ on Stack Overflow

How to apply CSS variable on dynamic CSS class in dynamic component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related