javascript 更改自定义主题 Material-UI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52109295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change custom theme Material-UI
提问by Kumar
I am using Material-UIfor a React project. However, I'm not sure as to how to apply a theme globally.
我正在将Material-UI用于 React 项目。但是，我不确定如何在全球范围内应用主题。
Here I have tried for individual components
在这里，我尝试了单个组件
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.
},
});
So how can I change the primary and secondary colors globally?
那么如何全局更改主要和次要颜色？
回答by Araz Babayev
You can structure your app like this. Wrap the child components inside a MuiThemeProviderand pass a createMuiThemeobject to it as a themeproperty value.
您可以像这样构建您的应用程序。将子组件包裹在 a 中MuiThemeProvider，并将一个createMuiTheme对象作为theme属性值传递给它。
typography: {useNextVariants: true }fixes this error (Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.)
typography: {useNextVariants: true }修复此错误 ( Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.)
The official Material UI docs have more detailed information on this:
官方 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')
);
