web-dev-qa-db-fra.com

Changer le thème personnalisé Material-UI

J'utilise Material-UI pour un projet React. Cependant, je ne sais pas comment appliquer un thème globalement.

Ici, j'ai essayé pour des composants individuels

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

Alors, comment puis-je changer les couleurs primaires et secondaires globalement?

javascriptreactjsreact-reduxmaterial-ui
7
Kumar

Vous pouvez structurer votre application comme ceci. Enveloppez les composants enfants dans un MuiThemeProvider et passez-lui un objet createMuiTheme en tant que valeur de propriété theme.

typography: {useNextVariants: true } corrige cette erreur (Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.)

Les documents officiels de l'interface utilisateur des matériaux contiennent des informations plus détaillées à ce sujet:

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