web-dev-qa-db-fra.com

Comment puis-je créer un élément de style et l'ajouter à la tête dans React?

J'apprends actuellement React, et (plus important encore) j'essaie d'apprendre comment réagit réellement.

J'ai des CSS générés que je voudrais ajouter à la tête comme élément de style. En js land, ce serait:

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

Malheureusement, en React land, les choses semblent être un peu moins simples à cet égard. D'après ce que je comprends, c'est une mauvaise pratique d'ajouter des styles pour que tout soit bon gré mal gré, car suffisamment de gens font Je reconnais également que presque tout le monde utilise des composants de style, glamour, styled-jsx ou inline pour les CSS générés, car ils contournent de nombreux problèmes qui pourraient survenir à cause de la nillyness susmentionnée.

Mais je ne veux pas utiliser de modules que je ne comprends pas, et pour autant que je sache, la plupart des éléments ci-dessus créent des éléments de style et les ajoutent à la tête d'une manière ou d'une autre, et je voudrais savoir comment.

Donc, si je suis en React et que j'ai du texte css généré:

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

Qu'est-ce qui se passe ici?

createStyleElementAndAppendToHead(generatedCss) {
  // mystery code
};
cssreactjshtml-head
10
Seph Reed

Bienvenue chez React!

Il est vrai que dans React-Land il y a des bonnes pratiques que les gens vont pousser sur vous comme des composants stylés, glamour, styled-jsx, inline, etc. Et je les recommanderais même.

La grande partie de Reactjs est que le javascript Vanilla peut être utilisé. Ce même extrait de code peut être utilisé dans le cycle de vie componentDidMount

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

Ou vous pouvez même cibler les styles en ligne du corps comme suit:

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

MIS À JOUR pour React Hooks:

Mettez cela au début de votre composant fonctionnel

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