I'm working with library components and running into an issue with CSS when importing the same component multiple times within 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%;
}
Despite setting different colors on import:
<>
<CircleComponent color="red" />
<CircleComponent color="blue" />
</>
...both components end up being blue in color!
I've encountered errors when attempting to use style modules. How can I efficiently manage dynamic CSS without resorting to another external library?