我正在使用 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
属性值传递给它。
还有 排版:{useNextVariants: true }
修复了以下错误:
(警告:Material-UI:您正在使用已弃用的排版变体,这些变体将在下一个主要版本中删除。
)
官方 Material UI 文档对此有更详细的信息:
编辑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')
);
关于javascript - 更改自定义主题 Material-UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52109295/