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

Question

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

考虑这个按钮：

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

现在默认情况下Mui-disabled将附加到此按钮。Whos color和 the 均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

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

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

目前我正在写作。还有其他组件会重用该disableBackground属性，请确保您看一下并且也同意这一点。我在下面的示例中将它们全部显示出来。

现场演示