Невозможно переопределить отключенный Fab цветной материал - интерфейс

Question

Невозможно изменить стиль отключенной кнопки. Я попробовал способы, описанные здесь https://github.com/mui-org/material-ui/issues/13779

Версия Mui -

"@ 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>

ИЛИ

           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>

В обоих случаях disabled пользовательские стили не применяются, вместо них применяется стиль по умолчанию. Буду признателен за любую помощь.

Пожалуйста, проверьте демо здесь

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

Answer 1

Работает следующий подход:

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>
  );
}