React Material Theme Chooser - PullRequest
       6

React Material Theme Chooser

0 голосов
/ 19 января 2019

Итак, я работаю с реактивным материалом в моем приложении.Все до сих пор нормально, но я хочу создать приложение, в котором темы могут храниться на сервере, и я могу загружать их по выбору пользователя.

Так что до сих пор я знаю, что могу создавать несколько тем ихраните их, как указано здесь , но я хочу сохранить их на заднем плане, и у меня нет идеи, как это будет работать

Так что мне нужна помощь для идеи или какой-тоучебник, который может направить меня в правильном направлении?

1 Ответ

0 голосов
/ 19 января 2019

Вам просто нужно сохранить атрибуты, которые вы разрешаете пользователю изменять / указывать. Например, вы можете позволить им выбрать только основной и дополнительный цвет. Затем вы должны сохранить эти две части информации в вашей БД и затем воссоздать тему, используя createMuiTheme.

Вот пример кода, демонстрирующего это:

import React from "react";
import ReactDOM from "react-dom";

import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Button from "@material-ui/core/Button";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";

const themeDB = {
  a: {
    primaryColor: "#0f0",
    secondaryColor: "#f0f"
  },
  b: {
    primaryColor: "#ff0",
    secondaryColor: "#0ff"
  }
};
const createThemeFromThemeDBEntry = themeDBEntry => {
  return createMuiTheme({
    palette: {
      primary: {
        main: themeDBEntry.primaryColor
      },
      secondary: {
        main: themeDBEntry.secondaryColor
      }
    }
  });
};
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentTheme: createMuiTheme() };
  }
  switchToThemeA = () => {
    const themeA = createThemeFromThemeDBEntry(themeDB.a);
    this.setState({ currentTheme: themeA });
  };
  switchToThemeB = () => {
    const themeB = createThemeFromThemeDBEntry(themeDB.b);
    this.setState({ currentTheme: themeB });
  };
  useDefaultTheme = () => {
    this.setState({ currentTheme: createMuiTheme() });
  };
  render() {
    return (
      <>
        <CssBaseline />
        <MuiThemeProvider theme={this.state.currentTheme}>
          <AppBar position="static">AppBar using Primary Color</AppBar>
          <AppBar position="static" color="secondary">
            AppBar using Secondary Color
          </AppBar>
          <br />
          <Button
            onClick={this.switchToThemeA}
            variant="contained"
            color="primary"
          >
            Use Theme A
          </Button>
          <Button
            onClick={this.switchToThemeB}
            variant="contained"
            color="secondary"
          >
            Use Theme B
          </Button>
          <Button onClick={this.useDefaultTheme} color="secondary">
            Use Default Theme
          </Button>
        </MuiThemeProvider>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit oozp6kqkq6

...