更改自定义主题 Material-UI

Posted 2023-02-22

【中文标题】更改自定义主题 Material-UI

【英文标题】：Change custom theme Material-UI

【发布时间】：2019-02-06 02:56:52

【问题描述】：

我将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.
    ,
);

那么如何全局更改原色和副色？

【参考方案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 官方文档对此有更详细的信息：

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

【讨论】：

嘿阿拉兹！发布答案时，不要只发布代码。请解释一下，以便其他人理解。

【参考方案2】：

Material UI 版本 5 代码：

import  ThemeProvider, createTheme  from '@mui/material/styles';

const themeOptions = 
  palette: 
    type: 'light',
    primary: 
      main: '#3f51b5',
    ,
    secondary: 
      main: '#f50057',
    ,
  ,
;

const theme = createTheme(themeOptions);

<ThemeProvider theme=theme>
    <App />
</ThemeProvider>