Как загрузить Material UI Theme на основе записи в магазине Redux - PullRequest
Новая
       3

Как загрузить Material UI Theme на основе записи в магазине Redux

0 голосов
/ 29 мая 2019

У меня есть файл ниже, как первый файл, который загружается при загрузке моего приложения.Я хочу получить тип палитры из моего магазина Redux, например this.props.pageTheme, поэтому, когда я запускаю изменение темы, это происходит во всем приложении.хотя, когда я ввожу type: this.props.pageTheme, я получаю сообщение об ошибке TypeError: Cannot read property 'props' of undefined .. Что будет иметь смысл, потому что хранилище не генерируется временем, когда включается 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);

1 Ответ

0 голосов
/ 29 мая 2019

Так что я уверен, что найдутся люди, которые ищут ответ на этот вопрос, так как он предлагает пользователям возможность изменять цветовой режим вашего приложения. Мое решение ниже, если я сталкиваюсь с любым, я буду обновлять его.

В магазине 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"
      }
    }
  });
}

Если у вас есть какие-либо предложения по этому поводу, чтобы их улучшить, все равно высоко ценят.

...