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

Question

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

我生成了一些 css，我想将其作为样式元素附加到头部。在 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 或 inline 来生成 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 的重要部分是可以使用 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})`;
}, []);

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

How can I create a style element and append to head in React?

css

html-head

reactjs