reactjs - 定义不带样式组件的 CSS 变量

Question

我想在 React 中定义或更新 CSS 变量。我已经看到许多使用 Styled Components 库的例子。有没有一种方法可以在 React 中设置 CSS 变量，而无需像 Styled Components 这样的东西？

一个例子是每次状态改变时更新定义

useEffect( () => {
    // update css variable
    // --my-css-var: width 75%
}, [state])

Answer 1

看起来这可以用 style.setProperty() 来完成 Docs

在 React 中，这需要使用 ref Docs所以我们可以将其应用于特定元素。

const reference = useRef(null);
const [state, setState] = useState(100);
useEffect(() => {
    reference.current.style.setProperty('--my-css-var', state);
}, [state]);