web-dev-qa-db-fra.com

Changer les couleurs secondaires et primaires dans Material-UI

J'ai trouvé un type d'erreur ou quelque chose .. je ne sais toujours pas. J'ai une application React, où j'utilise material-ui en tant qu'interface utilisateur. Lorsque vous importez un bouton par exemple, vous pouvez changer sa couleur en utilisant primary={true} ou secondary={true}. Mais j'ai décidé de changer les couleurs primary et secondary. J'ai découvert que je peux le faire de cette façon:

const theme = createMuiTheme({
   palette: {
        primary: '#00bcd4',
        secondary: '#ff4081'
      }
    });

et puis ici je peux l'utiliser:

    <MuiThemeProvider theme={theme}>
      <App/>
    </MuiThemeProvider>

Mais j'ai une erreur: createMuiTheme is not a function...

Je suis entré dans le material-ui package et découvert qu'il n'y a pas un tel fichier et quand j'importe createMuiTheme j'obtiens undefined. Il est censé être importé de material-ui/styles/theme mais je n'ai pas du tout ce dossier!

J'utilisais [email protected]. J'ai mis à jour ce package en v20.. et il n'y a pas de dossier de toute façon ...

Comment sait comment résoudre ce problème?

material-designmaterial-ui
13
Den Gas

Les deux différences avec la documentation que j'ai remarquée sont le nom de l'accessoire pour le MuiThemeProvider:

<MuiThemeProvider muiTheme={muiTheme}>
   <AppBar title="My AppBar" />
</MuiThemeProvider>

Et la fonction n'est pas createMuiTheme mais getMuiTheme:

import getMuiTheme from 'material-ui/styles/getMuiTheme';

Mise à jour:

Si vous ouvrez le thème lumineux du package, ils n'utilisent pas le primaire ou le secondaire, peut-être devriez-vous essayer comme ça?

enter image description here

1
Eudes
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Root from './Root';

// use default theme
// const theme = createMuiTheme();

// Or Create your Own theme:
const theme = createMuiTheme({
  palette: {
    secondary: {
        main: '#E33E7F'
      }
    }
  },
)

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector('#app'));

source: https://material-ui.com/customization/themes/

1
Alan

Vous devez utiliser v1-beta comme le recommandent les documents. J'ai moi-même eu ces problèmes et j'ai réalisé que j'utilisais une version obsolète de MUI.

npm install material-ui@next

Importer:

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

Créez votre thème:

const theme = createMuiTheme({
    palette: {
        secondary: {
            main: '#d32f2f'
        }
      },
});

Appliquez-le à votre bouton:

<MuiThemeProvider theme={theme}>
   <Button
     onClick={this.someMethod} 
     variant="raised"
     color="secondary" 
   </Button>
</MuiThemeProvider>

Habituellement, si vous rencontrez des problèmes de import concernant MUI, c'est presque à chaque fois un problème de version.

1
Claim0013