Stil Buttons mit verschiedenen Palettenfarben

Mit Material UI v1:Stil Buttons mit verschiedenen Palettenfarben

mag ich mehrere Buttons mit verschiedenen Farben erzeugen, die aus der Material-UI-Palette genommen werden.

Idealerweise würde ich gerne wie etwas haben:

<Button color="colorFromThePalette"> 
<Button color={ theme.palette.myColor }>

Aber ich erhalte den folgenden Fehler:

Failed prop type: Invalid prop color of value someValue supplied to Button , expected one of ["default","inherit","primary","accent","contrast"].

Was sind meine Optionen, wenn man bedenkt ich mit dem Material Design konsequent sein wollen Palette?

Quelle

2017-10-03 galah92

einen Blick auf die [Customization Abschnitt] Nehmen (https://material-ui-1dab0.firebaseapp.com/customization/themes/#configuration-variables). Sie können die Standardwerte mit Ihren eigenen überschreiben, aber am Ende müssen Sie immer noch die definierten Farbschlüsselwörter verwenden. –

Ich habe mehr als 4-5 Farben, die ich gerne verwenden würde, daher ist das Überschreiben von "primären"/"Akzent" -Farben in meinem Thema keine gute Option für mich. – galah92

Sie können dann jeder Schaltfläche einen 'className' mit benutzerdefinierten CSS-Klassen hinzufügen, die die Hintergrundfarbe definieren, die Sie verwenden möchten. Stellen Sie beim Importieren dieses Stylesheets sicher, dass Sie es importieren, nachdem Sie die Material-ui-Teile importiert haben. –

Sie können Klassen Eigenschaft verwenden und nur gewünschte Schlüssel überschreiben. Für mich flatPrimary und raisedPrimary war genug.

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { withStyles } from 'material-ui/styles'; 
import { fade } from 'material-ui/styles/colorManipulator'; 
import teal from 'material-ui/colors/teal'; 
import Button from 'material-ui/Button'; 

const styles = theme => ({ 
    flatTeal: { 
    color: teal[500], 
    '&:hover': { 
     backgroundColor: fade(teal[500], 0.12) 
    } 
    }, 
    raisedTeal: { 
    backgroundColor: teal[500], 
    '&:hover': { 
     backgroundColor: teal[700], 
     '@media (hover: none)': { 
     backgroundColor: teal[500] 
     } 
    } 
    } 
}); 

const Teal = props => { 
    const { classes } = props; 

    return (
    <div> 
     <Button color="primary"> 
     Primary flat 
     </Button> 
     <Button raised color="primary"> 
     Primary raised 
     </Button> 
     <Button 
     color="primary" 
     classes={{ flatPrimary: classes.flatTeal }} 
     > 
     Teal flat 
     </Button> 
     <Button 
     raised 
     color="primary" 
     classes={{ raisedPrimary: classes.raisedTeal }} 
     > 
     Teal raised 
     </Button> 
    </div> 
); 
}; 

Teal.propTypes = { 
    classes: PropTypes.object.isRequired 
}; 

export default withStyles(styles)(Teal);

https://codesandbox.io/s/v8r33xnlr5

Quelle

2017-12-27 21:01:52 Kidman

Können Sie den Code selbst in einem [mcve] bereitstellen, wenn der Link nicht mehr verfügbar ist? – LW001

Ich habe den Code hinzugefügt. – Kidman

Stil Buttons mit verschiedenen Palettenfarben

Antwort

Verwandte Themen