如何在React中创建样式元素并追加到头部? [英] How can I create a style element and append to head in React?

问题描述

我目前正在学习React，并且(更重要的是)尝试学习React的实际工作方式.

I'm currently learning React, and (more importantly) attempting to learn how react actually works.

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

I have some generated css which I would like to append to head as a style element. In js land, this would be:

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

不幸的是，在React领域，这方面似乎不太那么简单.我对此的理解是，将样式附加到所有意志顽固的人身上是不好的做法，因为这样做的人太多会导致问题.我也认识到，大多数人都使用样式化组件，魅力四射，样式化jsx或内联来生成css，因为它们规避了许多可能由上述的随意性带来的问题.

Unfortunately, in React land, things appear to be a little less straightforward in this regard. My understanding of this is that it is bad practice to append styles to head all willy nilly, because enough people doing it leads to problems. I also recognize that most everybody uses styled-components, glamorous, styled-jsx, or inline for generated css because they circumvent a lot of issues that might come up from the aforementioned willy nillyness.

但是我不想使用我不了解的模块，就我所知，上面的大多数模块都会创建样式元素并将它们附加到头上，而我想知道如何.

But I don't want to use modules that I have no understanding of, and as far as I can tell, most of the above create style elements and append them to head somehow, and I would like to know how.

因此，如果我在React中并生成了一些CSS文本:

So, if I'm in React and have some generated css text:

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

这里发生了什么?

createStyleElementAndAppendToHead(generatedCss) {
  // mystery code
};

推荐答案

欢迎使用React！

的确，在React-land中，人们会遵循一些最佳实践，例如样式组件，迷人的样式，jsx样式，内联等等.我什至会推荐这些最佳实践.

It's true that in react-land there are best practices that people will push onto you like styled-components, glamorous, styled-jsx, inline, etc. And I would even recommend those.

关于Reactjs的很大一部分是可以使用普通的javascript.可以在生命周期 componentDidMount

The great part about Reactjs is that vanilla javascript can be used. That same snippet of code can be used in the lifecycle componentDidMount

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

或者您甚至可以像这样针对身体的内联样式:

Or you can even target the body's inline styles like so:

componentDidMount() {
  const randBlue = ~~(Math.random() * 250);
  document.body.style.color = `rgb(10, 10, ${randBlue})`;
}

---

针对React Hooks更新:

---

UPDATED for React Hooks:

将其放在功能组件的开头

Put this at at the beginning of your functional component

useEffect(() => {
  const randBlue = ~~(Math.random() * 250);
  document.body.style.color = `rgb(10, 10, ${randBlue})`;
}, []);

这篇关于如何在React中创建样式元素并追加到头部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！