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

Question

我正在使用 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.
    },
});

那么如何全局更改原色和二次色呢？

Answer 1

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

还有 排版:{useNextVariants: true }修复了以下错误:

(警告:Material-UI:您正在使用已弃用的排版变体，这些变体将在下一个主要版本中删除。)

官方 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')
    );