web-dev-qa-db-fra.com

Comment ajouter plusieurs couleurs de palette d'interface utilisateur de matériau

J'essaie d'établir mes propres couleurs de palette pour correspondre à ma marque dans l'interface utilisateur matérielle. Jusqu'à présent, je ne peux que faire fonctionner les couleurs primaires et secondaires lorsqu'elles sont appliquées comme couleur de fond aux boutons. Lorsque j'ajoute mes propres noms de variables ou que j'utilise "accent" comme illustré sur le site Web de Material UI, le bouton est par défaut gris.

Voici mon code MyTheme.js:

import { createMuiTheme } from 'material-ui/styles';
import purple from 'material-ui/colors/purple';

export default createMuiTheme({
    palette: {
        primary: { // works
          main: '#165788',
          contrastText: '#fff',
        },
        secondary: { // works
          main: '#69BE28',
          contrastText: '#fff',
        },
        companyBlue: { // doesnt work - defaults to a grey button
            main: '#65CFE9',
            contrastText: '#fff',
        },
        companyRed: { // doesnt work - grey button
            main: '#E44D69',
            contrastText: '#000',
        },
        accent: { // doesnt work - grey button
            main: purple, // import purple doesnt work
            contrastText: '#000',
        },
    },
});

Voici mon code App.js:

import React, { Component } from 'react';
import Button from 'material-ui/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyTheme from './MyTheme';
import './App.css';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';


const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});


class App extends Component {
  constructor(props)
  {
    super(props);
  }  

  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={MyTheme}>
          <Button variant="raised" >
          Default
          </Button>
          <Button variant="raised" color="primary" className={classes.button}>
          Primary
          </Button>
          <Button variant="raised" color="secondary" className={classes.button}>
          Secondary
          </Button>
          <Button variant="raised" color="companyRed" className={classes.button}>
          Company Red
          </Button>
          <Button variant="raised" color="accent" className={classes.button}>
          Accent
          </Button>
      </MuiThemeProvider>
      );
  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(App);
reactjsthemesmaterial-ui
10
Bethany

Autre que de devoir changer purple dans votre MyTheme pour être quelque chose comme purple[500], Je ne sais pas pourquoi cela ne fonctionnerait pas pour vous. Êtes-vous sûr de pouvoir remplacer autre chose que primary et secondary de cette manière?

Quoi qu'il en soit, voici une solution:

Dans MyTheme.js:

accent: { backgroundColor: purple[500], color: '#000' }

Puis dans App.js:

<Button 
  variant="raised" 
  style={MyTheme.palette.accent} 
  className={classes.primary}>
    Accent
</Button>

Exemple de travail ici .

4
Colin Ricardo