Not able to change the style of the disabled button. I tried the ways discussed here https://github.com/mui-org/material-ui/issues/13779
Mui version -
"@material-ui/core": "3.8.1",
"@material-ui/icons": "3.0.1",
const styles = theme => ({
fabButton: {
boxShadow: 'none',
backgroundColor: '#fff',
},
disabled: {
backgroundColor: '#fff',
},
icon: {
width: '20px',
height: '20px',
color: grey[600],
},
});
<Hint title="Previous">
<Fab
size="small"
classes={{
root: classes.fabButton,
disabled: classes.disabled
}}
disabled={true}
component="div"
onClick={onClickHandle}
>
<IconChevronLeft className={classes.icon} />
</Fab>
</Hint>
OR
const styles = theme => ({
fabButton: {
boxShadow: 'none',
backgroundColor: '#fff',
'&:disabled': {
backgroundColor: '#fff',
}
},
icon: {
width: '20px',
height: '20px',
color: grey[600],
},
});
<Hint title="Previous">
<Fab
size="small"
className={classes.fabButton}
disabled={true}
component="div"
onClick={onClickHandle}
>
<IconChevronLeft className={classes.icon} />
</Fab>
</Hint>
In both ways disabled custom styles are not applying instead, taking the default style. Any help would be appreciated.
Please check the demo here