Can't override Fab disabled color material - ui

Viewed 3637

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

https://codesandbox.io/s/material-demo-rh06m

1 Answers

The following approach works:

const styles = theme => ({
  fab: {
    margin: theme.spacing.unit,
    "&$disabled": {
      backgroundColor: "red"
    }
  },
  disabled:{},
  icon: {
    color: "#000"
  },
  extendedIcon: {
    marginRight: theme.spacing.unit
  }
});

function FloatingActionButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Tooltip title="F">
        <Fab
          disabled
          aria-label="Delete"
          classes={{root: classes.fab, disabled: classes.disabled}}
          component="div"
        >
          <DeleteIcon className={classes.icon} />
        </Fab>
      </Tooltip>
    </div>
  );
}
Related