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

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

我目前正在学习 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
};

欢迎使用 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})`;
}, []);