Изменить пользовательскую тему Material-UI - PullRequest
Новая
       5

Изменить пользовательскую тему Material-UI

0 голосов
/ 31 августа 2018

Я использую 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.
    },
});

Так, как я могу изменить основной и дополнительный цвета глобально?

1 Ответ

0 голосов
/ 31 августа 2018

Вы можете структурировать свое приложение следующим образом. Оберните дочерние компоненты внутри 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.)

В официальных документах по интерфейсу материалов есть более подробная информация об этом: 

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