我如何创建样式元素并附加到 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})`;
}, []);
我目前正在学习 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})`;
}, []);