Question

我的客户要求我们在React应用程序中需要自定义主题。

用户可以在其中选择自己的可用主题之一，这将更改某些CSS属性，例如font-color，font-family等。

现在，我使用className属性将CSS规则应用于应用程序。

我尝试搜索实现相同方法的一些方法，发现其中一种方法是使用备用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。 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并结合记录器信息来实现相似的概念，从而简化我们的工作。

在React应用程序中实现主题

1 个答案: