私は 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
プロパティ値として渡します。
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')
);