J'ai un bouton (à partir de l'interface utilisateur du matériel) qui est grisé si la date n'est pas définie. Si vous définissez une date, il doit être cliquable. Je veux styler le bouton pour ces cas.
Ceci est le bouton: P>
'.enabledButton': {
background: '#ffb303!important',
},
'.defaultButton': {
background: '#cfcfcf!important',
},
4 Réponses :
Vous pouvez l'essayer de 2 façons:
1ère méthode: strong>
Vous pouvez ajouter les styles directement et faire la validation comme celle-ci (mais elle n'est pas préférable à injecter des styles directement)
P>
<div className={classes.root}>
<Button variant="contained">Default</Button>
<Button style={{
marginTop: 10,
}} disabled={this.props.date ? false : true}
className={this.props.date ? classes.enabledButton : classes.defaultButton}
variant="contained" color="primary">Send Request</Button>
Dans votre cas, vous pouvez utiliser CLASSES Attribut par Matériel-UI. Je vous ai fait un exemple complet à l'aide d'un composant fonctionnel:
Les deux options sont couvertes dans la Démo de travail ici p>
Code Snippet Strong> P> const useStyles = makeStyles(theme => ({
root: {
"& > *": {
margin: theme.spacing(1)
},
// using classname
"& .Mui-disabled": {
background: "#ffb303"
}
}
}));
const useStyles2 = makeStyles(theme => ({
root: {
"& > *": {
margin: theme.spacing(1)
},
"&$disabled": {
background: "rgba(0, 0, 0, 0.12)",
color: "red",
boxShadow: "none"
}
},
disabled: {}
}));
export default function ContainedButtons(props) {
const classes = useStyles();
const classes2 = useStyles2();
return (
<>
<div className={classes.root}>
<Button
variant="contained"
color="primary"
disabled={props.date ? false : true}
>
Button (using css name)
</Button>
</div>
<div>
<Button
classes={{ root: classes2.root, disabled: classes2.disabled }}
variant="contained"
color="primary"
disabled={props.date ? false : true}
>
Button (using rule name)
</Button>
</div>
</>
);
}
simple et facile à utiliser mon extrait: classes