给html元素追加style,css – 如何在React中创建样式元素并追加？

欢迎来到React！

确实,在反应土地上有人们会像风格组件,迷人,风格-jsx,内联等一样推动你的最佳实践.我甚至会推荐这些.

关于Reactjs的重要部分是可以使用vanilla javascript.可以在生命周期componentDidMount中使用相同的代码片段

componentDidMount() {

const $style = document.createElement("style");

document.head.appendChild($style);

const randBlue = ~~(Math.random() * 250);

$style.innerHTML = `body { color: rgb(10, 10, ${randBlue}); }`;

}

或者你甚至可以像这样定位身体的内联样式：

componentDidMount() {

const randBlue = ~~(Math.random() * 250);

document.body.style.color = `rgb(10, 10, ${randBlue})`;

}

React Hooks更新：

把它放在功能组件的开头

useEffect(() => {

const randBlue = ~~(Math.random() * 250);

document.body.style.color = `rgb(10, 10, ${randBlue})`;

});