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属性值传递给它。

typography: {useNextVariants: true } 修复了此错误（Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.）

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

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

更改自定义主题Material-UI

1 个答案: