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

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

Answer 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'
    }
  }
}

Answer 2

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

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

Answer 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>

Answer 4

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

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

然后，像这样使用它：

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

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

Answer 5

最简单的方法是使用sxprop：

import React from "react";
import { Button } from "@mui/material";
export default function App() {
  return (
    <Button
      disabled
      variant="contained"
      sx={{
        "&.Mui-disabled": {
          background: "#eaeaea",
          color: "#c0c0c0"
        }
      }}
    >
      Disabled Button
    </Button>
  );
}

但使用 MIU 主题将使更改在全局范围内持续存在，而无需再次设置样式

import React from "react";
import { Button } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          "&.Mui-disabled": {
            background: "#f3f3f3",
            color: "#dadada"
          }
        }
      }
    }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button disabled variant="contained">
        Disabled Button
      </Button>
    </ThemeProvider>
  );
}

您甚至可以根据所选的变体对其进行自定义：

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState }) => {
          switch (ownerState.variant) {
            case "contained":
              return {
                "&.Mui-disabled": {
                  background: "#f3f3f3",
                  color: "#dadada"
                }
              };
            case "outlined":
              return {
                "&.Mui-disabled": {
                  background: "#e9e9e9",
                  color: "#c7c7c7",
                  borderColor: "#e4e4e4"
                }
              };
            default:
              return;
          }
        }
      }
    }
  }
});

以下是有关自定义禁用按钮颜色的更详细教程：

https://muhimasri.com/blogs/customizing-disabled-button-colors-with-mui/

Answer 6

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

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

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