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>

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>

两种方式都不会应用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>
  );
}

无法覆盖禁用Fab的颜色材料-UI

1 个答案: