Question

我想在我的React和Redux Web应用程序中实现一个在两个主题之间切换的选项。

我有2个不同的CSS文件，每个主题一个。现在，为了应用CSS文件的样式，我只需将它导入我的App.js的头部。

import '../styles/theme1.css';

const App = (props) => {
    return (
      <div>
        <Header />
        <Container/>
      </div>
    );
};

const mapStateToProps = (state) => ({
    theme: state.settings.theme  // can return 'theme1' / 'theme2'
});

export default withRouter(connect(mapStateToProps)(App));

所以我想根据应用的状态（'theme1'或'theme2'）导入样式。
我可以想到一些混乱的方法，并找到一些现成的包，但我想知道是否有一种传统的方法这样做，有效和尽可能干净。

这是一个create-react-app工具包。

谢谢。

Answer 1

尝试使用scss / sass - 我认为它可以简化整个过程，因为它允许您嵌套类/元素。

例如，假设您在两个状态之间切换：theme1和theme2：

<div className={this.state.theme}>
   <h2>Some text</h2>
</div>

您的.scss文件应该看起来像

.theme1{
   background-color: black;

     h2 {
      color: white;
     }
}

.theme2{
  background-color: white;

    h2{
     color: black;
    }
}

Answer 2

根据您的taskrunner配置的设置方式，一种可能性是引入React-Helmet，这将允许您根据主题更改<head>中的CSS引用。

import React from "react";
import {Helmet} from "react-helmet";

function StyleSwitch (props) {
  return (
    <Helmet>
      <link rel="stylesheet" href={props.stylesheet} />
    </Helmet>
  );
};

使用React＆amp; amp;在Web应用程序的主题之间切换的最佳方式是什么？终极版？

2 个答案: