javascript - 如何动态配置material-ui主题？

Question

动态配置 material-ui 主题对象的方法是什么？

当用户单击mui文档页面上的“设置文档颜色”按钮时，就会实现该行为。

Answer 1

您可以使用theme-provider来创建主题并将其提供给您的应用程序。下面给出了创建和提供主题的基本代码。

import { MuiThemeProvider } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core/styles';
import App from './App';

const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

export default props => (
  <MuiThemeProvider theme={theme}>
    <App {...props}/>
  </MuiThemeProvider>
);

其中 App 是您的主要应用程序组件。

如果您有多个主题，那么您必须保持一个状态，您将定义要提供的主题。

import { MuiThemeProvider } from '@material-ui/core';
import React, { useState } from 'react';
import DarkTheme from './DarkTheme';
import LightTheme from './LightTheme';
import App from './App';

export default props => {
    const [darkTheme, setDarkTheme] = useState(false);
    return (
        <MuiThemeProvider theme={darkTheme ? DarkTheme : LightTheme}>
            <App
                {...props}
                darkTheme={darkTheme}
                handleDarkThemeChanged={setDarkTheme}/>
        </MuiThemeProvider>
    );
};