web-dev-qa-db-ja.com

カスタムテーマMaterial-UIの変更

私は 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.
    },
});

原色と二次色をグローバルに変更するにはどうすればよいですか？

javascriptreactjsreact-reduxmaterial-ui
7
Kumar

このようにアプリを構成できます。 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')
);
15
Araz Babayev