如何在 Material-UI 中保持禁用按钮的背景颜色？

Question

我想从Material-UI 更改禁用的Button 组件的全局样式。但问题是我无法保留按钮的原始配色方案。

考虑一下这个按钮：

<Button color="secondary" disabled={isLoading}>Create Account</Button>

现在默认情况下Mui-disabled 将附加到此按钮。其color 和background-color 取自theme.palatte.action 属性。所以这个禁用的按钮的 CSS 如下：

color: rgba(0,0,0,0.26);
box-shadow: none;
background-color: rgba(0,0,0,0.12);

但我希望我的禁用按钮保持其原始颜色（“主要、次要”、“错误”等）添加不透明度0.7。默认情况下，光标事件由 MUI 设置为无。

我尝试使用自定义主题，但我不知道如何保持按钮的原始颜色。例如，如果Button 是primary，则保留原色，如果Button 是secondary，则保留辅助色。

    MuiButton: {
        styleOverrides: {
            root: {
                textTransform: "none",
                boxShadow: "none",
                "&.Mui-disabled": {
                    // background: "initial",
                    // color: "initial",
                    opacity: .7
                }
            },
        }
    }

当然，我不想为每个代码编写自定义代码。我甚至可以通过在 MUI 的按钮周围创建一个包装器并在我的代码中的任何地方使用该包装器来做到这一点。 但我想通过覆盖主题以 MUI 方式来实现。

如何实施全局解决方案？

Answer 1

这是你想要的吗？只是不要在palette 中设置disabledBackground 颜色：

import Button, { buttonClasses } from "@mui/material/Button";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const defaultTheme = createTheme();
const theme = createTheme({
  palette: {
    action: {
      disabledBackground: "", // don't set the disable background color
      disabled: "white", // set the disable foreground color
    }
  },
  components: {
    MuiButtonBase: {
      styleOverrides: {
        root: {
          [`&.${buttonClasses.disabled}`]: {
            opacity: 0.5
          },
          // Fix ButtonGroup disabled styles.
          [`&.${toggleButtonClasses.root}.${buttonClasses.disabled}`]: {
            color: defaultTheme.palette.action.disabled,
            borderColor: defaultTheme.palette.action.disabledBackground
          }
        }
      }
    }
  }
);

目前我正在写作。还有其他 components 重用了 disableBackground 属性，请确保您看一下并且也可以接受。我将它们全部显示在下面的示例中。

现场演示

Answer 2

以默认样式处理禁用状态的方式，我认为您需要在覆盖中重新定义默认颜色才能使其正常工作。

在源代码中，您可以找到如何为 text、outlined 和 contained 变体定义默认颜色。

下面的示例演示了通过在"&.Mui-disabled" 样式覆盖中重新定义非禁用颜色来使用opacity: 0.7 覆盖所有三个变体的禁用样式。

import * as React from "react";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { alpha } from "@mui/system";
const defaultTheme = createTheme();
const colors = [
  "inherit",
  "primary",
  "secondary",
  "success",
  "error",
  "info",
  "warning"
];
const containedColorStyles = {};
const textColorStyles = {};
const outlinedColorStyles = {};
function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
colors.forEach((color) => {
  containedColorStyles[`&.MuiButton-contained${capitalizeFirstLetter(color)}`] =
    color === "inherit"
      ? {
          backgroundColor: defaultTheme.palette.grey[300],
          color: defaultTheme.palette.getContrastText(
            defaultTheme.palette.grey[300]
          )
        }
      : {
          backgroundColor: defaultTheme.palette[color].main,
          color: defaultTheme.palette[color].contrastText
        };
  textColorStyles[`&.MuiButton-text${capitalizeFirstLetter(color)}`] =
    color === "inherit"
      ? {
          color: "inherit"
        }
      : {
          color: defaultTheme.palette[color].main
        };
  outlinedColorStyles[`&.MuiButton-outlined${capitalizeFirstLetter(color)}`] =
    color === "inherit"
      ? {
          color: "inherit",
          borderColor:
            defaultTheme.palette.mode === "light"
              ? "rgba(0, 0, 0, 0.23)"
              : "rgba(255, 255, 255, 0.23)"
        }
      : {
          color: defaultTheme.palette[color].main,
          borderColor: `${alpha(defaultTheme.palette[color].main, 0.5)}`
        };
});
const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: "none",
          boxShadow: "none",
          "&.Mui-disabled": {
            ...containedColorStyles,
            ...textColorStyles,
            ...outlinedColorStyles,
            opacity: 0.7
          }
        }
      }
    }
  }
});
export default function ColorButtons() {
  const variants = ["text", "outlined", "contained"];
  return (
    <ThemeProvider theme={theme}>
      {variants.map((variant) => (
        <div key={variant}>
          {capitalizeFirstLetter(variant)} Variant
          <Stack direction="row" spacing={2}>
            {colors.map((color) => (
              <Button key={color} variant={variant} color={color}>
                {capitalizeFirstLetter(color)}
              </Button>
            ))}
          </Stack>
          Disabled {capitalizeFirstLetter(variant)} Variant
          <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
            {colors.map((color) => (
              <Button key={color} disabled variant={variant} color={color}>
                {capitalizeFirstLetter(color)}
              </Button>
            ))}
          </Stack>
        </div>
      ))}
    </ThemeProvider>
  );
}