Как я могу создать элемент стиля и добавить заголовок в React?

Question

В настоящее время я изучаю React и (что более важно) пытаюсь понять, как на самом деле работает реагирует.

У меня есть несколько сгенерированных CSS, которые я хотел бы добавить к заголовку как элемент стиля. На земельном участке это будет:

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

К сожалению, в React Land все выглядит немного менее простым в этом отношении. Насколько я понимаю, это плохая практика - добавлять стили в голову всем волей-неволей, потому что достаточное количество людей делает это, что приводит к проблемам. Я также признаю, что большинство всех использует сгенерированные компоненты, гламурные, стилизованные-jsx или встроенные для сгенерированных CSS, потому что они обходят многие проблемы, которые могут возникнуть из-за вышеупомянутой умышленной глупости.

Но я не хочу использовать модули, о которых я ничего не понимаю, и, насколько я могу судить, большинство из вышеперечисленных создают элементы стиля и каким-то образом добавляют их в заголовок, и я хотел бы знать, как это сделать.

Итак, если я в React и у меня есть сгенерированный текст CSS:

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

Что здесь происходит?

createStyleElementAndAppendToHead(generatedCss) {
  // mystery code
};

Answer 1

Добро пожаловать в Реакт!

Это правда, что в реагирующей стране есть лучшие практики, на которые люди будут толкать вас, такие как styleled-elements, glamorous, styled-jsx, inline и т. Д. И я бы даже порекомендовал их.

Большая часть о Reactjs - то, что ванильный 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 randomColor = Math.random() > 0.5 ? "red" : "blue";
  document.body.style.color = `rgb(10, 10, ${randBlue})`;
}