css - 我如何创建样式元素并附加到 React 中的头部？

Question

我目前正在学习 React，并且(更重要的是)尝试了解 React 的实际工作原理。

我有一些生成的 css，我想将其作为样式元素附加到 head 中。在 js 领域，这将是:

const $style = document.createElement("style");
document.head.appendChild($style);
const randBlue = ~~(Math.random() * 250);
$style.innerHtml = `body { color: rgb(10, 10, ${randBlue}); }`;

不幸的是，在 React 领域，这方面的事情似乎没有那么简单。我对此的理解是，随意将样式附加到头部是不好的做法，因为这样做的人太多会导致问题。我还认识到，大多数人都使用 styled-components、glamorous、styled-jsx 或内联生成的 css，因为它们避免了很多可能因上述任性而产生的问题。

但我不想使用我不了解的模块，据我所知，上面的大部分创建样式元素并以某种方式将它们附加到头部，我想知道如何。

所以，如果我在 React 中并且有一些生成的 css 文本:

const randomColor = Math.random() > 0.5 ? "red" : "blue";
const generatedCss = `body { color: ${randomColor}; }`;

这里有什么？

createStyleElementAndAppendToHead(generatedCss) {
  // mystery code
};

Answer 1

欢迎使用 React!

的确，在 react-land 中，人们会把最佳实践强加给您，例如 styled-components、glamorous、styled-jsx、inline 等。我什至会推荐这些。

关于 Reactjs 的重要部分是可以使用普通的 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})`;
}, []);