Styling of disabled and enabled button - reactjs

Question

I have one button (from material ui) which is greyed out if the date is not set. If you set a date it should be clickable. I want to style the button for those cases.
This is the button:
<Button style={{
marginTop: 10
}} disabled={this.props.date ? false : true} onClick={this.sendRequest} variant="contained" color="primary">Send Request</Button>
Those are my button-classes for styling:
'.enabledButton': {
background: '#ffb303!important',
},
'.defaultButton': {
background: '#cfcfcf!important',
},
I tried to apply it in the false / true check. If its true it should apply the .enabledButton and for the false case it should apply the .defaultButton.
Can someone help me with it?
Thank you very much!

Answer 1

You can override css which is injected by material ui
you can use rule name
Both options are covered in the working demo here
Code snippet
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>
</>
);
}

Answer 2

In your case you can use classes atribute by material-ui. I made you a full example using a functional component:
import React from 'react'
import Button from '#material-ui/core/Button'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
button: {
backgroundColor: '#ffb303',
},
disabledButton: {
backgroundColor: '#cfcfcf',
}
}))
export default () => {
const [disabled, setDisabled] = React.useState(false)
const classes = useStyles()
const toggleDisabled = () => setDisabled(prev => !prev)
return (
<>
<Button
disabled={disabled}
onClick={toggleDisabled}
classes={{
root: classes.button,
disabled: classes.disabled
}}
variant="contained"
>
Toggle
</Button>
<Button
disabled={!disabled}
onClick={toggleDisabled}
classes={{
root: classes.button,
disabled: classes.disabled
}}
variant="contained"
>
Toggle
</Button>
</>
)
}

Answer 3

const useStyles = makeStyles({
enabledButton: {
background: '#ffb303!important',
'&:disabled': {
background: '#cfcfcf!important',
}
},
});
function Componenet() {
const classes = useStyles();
...
...
return (
<Button
className={classes.enabledButton}
disabled={!this.props.date}
onClick={this.sendRequest}
variant="contained"
color="primary"
>
Send Request
</Button>
);
}

Answer 4

You can try it in 2 ways:
1st Method:
You can add the styles directly and do the validation like this (but its not preferrable to inject styles directly)
<div className={classes.root}>
<Button variant="contained">Default</Button>
<Button style={{
marginTop: 10,
backgroundColor: `${this.props.date ? '#ffb303':'#cfcfcf'}`
}} disabled={this.props.date ? false : true}
variant="contained" color="primary">Send Request</Button>
2nd Method:
You can use styles and do the validation in your code.
const useStyles = makeStyles((theme) => ({
enabledButton: {
backgroundColor: '#ffb303',
},
defaultButton: {
backgroundColor: '#cfcfcf',
},
}));
const classes = useStyles();
<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>

Answer 5

simple and easy to use my snippet:
<TextField
fullWidth={fullWidth}
disabled={disabled}
onChange={onChange}
InputProps={{
classes: {
underline: classes.underline,
disabled: disabled ? classes.disabled : {},
},
}}
{...rest}
/>
)
classes
const useStyles = makeStyles((theme) => ({
label: {
paddingRight: theme.spacing(1),
fontFamily: 'Montserrat Light',
fontSize: `0.875rem`,
},
underline: {
marginTop: 0,
marginBottom: 0,
fontFamily: 'Montserrat Light',
color: `${$white}`,
fontSize: `0.875rem`,
'&::after': {
borderBottom: `1px solid ${$white}`,
},
'&::before': {
borderBottom: `1px solid rgba(255, 255, 255, 0.36)`,
},
'&:hover&::before': {
borderBottom: `1px solid ${$white}`,
},
},
disabled: {
'&:hover&::before': {
borderBottom: `1px dotted rgba(255, 255, 255, 0.36)`,
},
},
}))