React Material UI：禁用时如何为按钮提供自定义颜色？

Question

我正在使用 Material UI 构建一个 React 应用程序。

如果按钮被禁用，它是灰色且不透明的。我希望它在我的主题中是原色和不透明的。

所以这是我尝试过的：

 import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  button: {
    ":disabled": {
      backgroundColor: theme.palette.primary || 'red'
    }
  }
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        disabled
        className={classes.button}
      >
        Disabled
      </Button>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ContainedButtons);

但按钮保持灰色。如何更改禁用元素的样式？

原文由 J. Hesters 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以定义一个应用于禁用按钮的类：

 const styles = theme => ({
  disabledButton: {
    backgroundColor: theme.palette.primary || 'red'
  }
});

然后，像这样使用它：

 <Button
  variant="contained"
  color="secondary"
  disabled
  classes={{ disabled: classes.disabledButton }}
>
  Disabled
</Button>

您可以在 文档中找到您可以覆盖的所有类。

原文由 Arnaud Christ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

或者您可以尝试 createMuiTheme 并自定义以下属性：

 import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({
  palette: {
    action: {
      disabledBackground: 'set color of background here',
      disabled: 'set color of text here'
    }
  }
}

原文由 Francis Nepomuceno 发布，翻译遵循 CC BY-SA 4.0 许可协议