Question

我将以下文件作为应用程序加载时第一个加载的文件。我想从Redux商店中提取调色板类型，例如this.props.pageTheme，所以当我触发主题更改时，它会在整个应用程序中发生。尽管当我输入type: this.props.pageTheme时我得到一个错误，说TypeError: Cannot read property 'props' of undefined ..这将是有道理的，因为存储不是在const插入的时间生成的。但是..那么，我如何读取存储中的内容并在页面上更改？我已经看到了一些解决方案，例如创建多个主题const并基于this.props.getTheme在应用程序返回时应用它，但这是非常丑陋的方式。有什么聪明的方法可以将主题值注入到createMuiTheme中？

import React, { Component } from "react";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    type: "light",
  }
});

class App extends Component {
  render() {
      return (
        <MuiThemeProvider theme={theme}>
          <>page content</>
        </MuiThemeProvider>
      );
    }
  }
}

function mapStateToProps(state) {
  return {
    pageTheme: state.Page.Theme
  };
}

export default connect(
  mapStateToProps
)(App);

Answer 1

所以我敢肯定，会有人在寻找这个问题的答案，因为它为用户提供了一种更改应用程序颜色模式的功能，非常时尚。我的解决方案如下，如果遇到任何问题，我都会对其进行更新。

在Redux商店中，我有：

const initialState = {
  Page: {
    Theme: "light"
  },
};

在主App.js文件中，

<MuiThemeProvider theme={theme(this.props.pageTheme)}>

用作我页面上内容的包装。

并且我具有以下主题功能

function theme(mode) {
  return createMuiTheme({
    palette: {
      type: mode,
      primary: {
        light: "#757ce8",
        main: "#3f50b5",
        dark: "#002884",
        contrastText: "#fff"
      },
      secondary: {
        light: "#ff7961",
        main: "#f44336",
        dark: "#ba000d",
        contrastText: "#000"
      }
    }
  });
}

如果对此有任何建议可以改善它，仍然非常感谢。

如何基于Redux Store条目加载Material UI主题

1 个答案: