Вам просто нужно сохранить атрибуты, которые вы разрешаете пользователю изменять / указывать. Например, вы можете позволить им выбрать только основной и дополнительный цвет. Затем вы должны сохранить эти две части информации в вашей БД и затем воссоздать тему, используя 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](https://codesandbox.io/static/img/play-codesandbox.svg)