React 是使用类名管理多个主题的好方法吗？答案

【问题标题】：React Is it good way to use classnames for managing multiple themes?React 是使用类名管理多个主题的好方法吗？
【发布时间】：2019-04-25 04:02:31
【问题描述】：

考虑以下代码：-

  render() {
      const headerClasses=classnames({
        "Header":true,
        "Header---dark":this.props.theme.dark,
        "Header--light":this.props.theme.light
      })
    return (
      <div className={headerClasses}>
            Header content goes here
      </div>
    )
  }

我的应用程序将只有两个主题。一暗一亮。我正在尝试将主题存储在 redux 商店中，并使用类名相应地更改类名。它是一种有效的方法还是一种反模式？在大型应用程序中管理主题的最简单方法是什么？

【问题讨论】：

可以说最简单的方法是在body 元素上设置一个类（例如theme-light）。基于此，您可以仅在 CSS 中更改所有样式。您的方法似乎非常重复，因为您必须在任何地方添加它。
我会检查样式化组件。它支持多个主题

标签： reactjs react-redux class-names

【解决方案1】：

有一个带主题的状态属性，以及所有对应的数据
将组件的主题设置为this.props.currentTheme
更改主题时，您只是更改了currentTheme 中的数据，其他所有内容也会更改

【讨论】：