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

【问题标题】：React Material UI: How to give a button a custom color when disabled?React Material UI：禁用时如何为按钮提供自定义颜色？
【发布时间】：2019-08-30 09:10:00
【问题描述】：

我正在使用 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);

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

或者您可以尝试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'
    }
  }
}

【讨论】：

没错！我还要添加`调色板：{动作：{禁用：YourCustomColor}}`

【解决方案2】：

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

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

然后，像这样使用它：

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

您可以在documentation all the classes 中找到您可以覆盖的内容。

【讨论】：

我喜欢这种方法，但不幸的是我相信它实际上不起作用（尽管如果我错了，我很想看看沙盒）。要让它工作，你需要遵循（不直观的）方法here。
这不起作用...必须使用jss-nested方法
这个答案来自 2019 年。可能是当前版本的 MUI 不再有效。

【解决方案3】：

Neps 的答案是正确的，但我会补充更多细节。

首先你应该导入 createMuiTheme 和 ThemeProvider：

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

创建主题：

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

然后包装你的按钮：

<ThemeProvider theme={theme}>
  <Button color="primary">Primary</Button>
</ThemeProvider>

【讨论】：

disabledBackground 的使用情况如何？

【解决方案4】：

您可以为按钮禁用类添加样式，例如：

.Mui-disabled { background-color: blue; }

您还可以查看可以使用哪些其他类来设置https://material-ui.com/api/button/ 上的按钮样式

【讨论】：

【解决方案5】：

遇到同样的问题并设法通过将:disabled 更改为&:disabled 来解决它。

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

【讨论】：