Реализация тематики в приложении React

Question

Я получил от своего клиента требование, чтобы в нашем приложении реагирования были собственные темы.

Где пользователь может выбрать одну из доступных тем по своему выбору, которая изменит некоторые атрибуты CSS, такие как font-color, font-family и т. Д.

Сейчас я применяю правила css к своему приложению, используя атрибут className.

Я попытался найти некоторые способы реализации того же самого и нашел один способ, который имеет альтернативный CSS

<link rel="stylesheet"           href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css"  id="dark"  title="Dark">

<script>
function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}
</script>

И переключить rel значение на основе выбора пользователя.

Может ли кто-нибудь предложить мне другой способ достижения того же.

Заранее спасибо.

Answer 1

Ваше использование является правильным способом реализации. Но что, если у вас есть многочисленные темы? Загрузка всех файлов CSS будет препятствовать веб-сайту. Поэтому я бы предложил вам обновить исходный код, а не загружать все CSS-файлы и включать / отключать их.

node.ref = 'dark.css';

Таким образом, вам нужен файл css только во время использования. Один раз файл используется, в следующий раз он кэшируется. Поэтому не нужно беспокоиться о них позже. Очевидно, что это может занять некоторое время и повлиять на производительность, если размер файла огромен при первоначальном использовании. Хотя самое лучшее, что вам не нужно ждать всех.

---

Но подождите !!!

Вы используете реакцию. React предоставляет нам context api , и я бы, очевидно, использовал это в таком сценарии. Вот выдержанный пример:

import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    // The entire state is passed to the provider
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

ReactDOM.render(<App />, document.root);

Аналогичная концепция может быть реализована с использованием redux и с информацией регистратора, чтобы упростить нашу работу.