reactjs - 无法覆盖 Fab 禁用的颜色 Material - ui

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>

在这两种方式中，禁用 自定义样式都没有应用，取而代之的是采用默认样式。任何帮助将不胜感激。

请在此处查看演示

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