Как применить переменную CSS на динамическом классе CSS в динамическом компоненте ⇐ CSS

[Anonymous]

У меня есть библиотечные компоненты, и когда я создаю некоторые компоненты, у меня есть проблема с 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
}
< /code>
css: < /p>
root: {
--color: black;
--size: 40px
}

.circle{
height: var(--size);
width: var(--size);
background-color: var(--color);
border-radius: 50%;
}
< /code>
Когда я импортирую этот компонент и устанавливаю другой цвет: < /p>

...both Components Получите синий цвет!
Я не мог использовать модуль стиля, есть много ошибок!>

Подробнее здесь: https://stackoverflow.com/questions/751 ... -component