javascript - 更改自定义主题Material-UI

我正在将Material-UI用于React项目。但是，我不确定如何全局应用主题。

在这里我尝试了单个组件

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import CardCommon from '../../common/card/CardCommon';

import purple from '@material-ui/core/colors/purple';
import Button from '@material-ui/core/Button';

import { Link } from 'react-router-dom';
//const primary = red[500]; // #F44336
import { Paths } from '../../../Routes';

const theme = createMuiTheme({
    palette: {
        primary: { main: purple[500] }, // Purple and green play nicely together.
        secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
    },
});

那么如何在全局范围内更改原色和副色？

最佳答案

您可以像这样构建应用程序。将子组件包装在MuiThemeProvider中，并将createMuiTheme对象作为theme属性值传递给它。

也是typography: {useNextVariants: true }修复了以下错误:

(Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.)

官方Material UI文档对此有更详细的信息:

MuiThemeProvider

Color

如下编辑index.js文件

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
    import './index.css';
    import App from './App';

    const theme = createMuiTheme({
       palette: {
          primary: {
             light: '#fff',
             main: 'rgb(23, 105, 170)',
             dark: '#000'
          },
          secondary: {
            main: '#f44336',
          },
       },
       typography: {
          useNextVariants: true
       }
    });

    ReactDOM.render(
       <MuiThemeProvider theme = { theme }>
          <App />
       </MuiThemeProvider>,
       document.getElementById('root')
    );