[解決済み] カスタムテーマ「Material-UI」の変更

質問

を使っています。 素材-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 の公式ドキュメントに、より詳細な情報があります。

• MuiThemeProvider
• カラー

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