reactjs 如何在材质界面中保持禁用按钮的背景色?

fiei3ece  于 2023-01-05  发布在  React
关注(0)|答案(3)|浏览(157)

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

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

现在默认情况下,Mui-disabled将附加到此按钮。其colorbackground-color取自theme.palatte.action属性。因此,此禁用按钮的CSS将为:

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

但是我希望我禁用的按钮保持原来的颜色(“primary,secondary”,“error”等),并添加0.7的不透明度。默认情况下,光标事件被MUI设置为无。
我尝试使用自定义主题,但我不知道如何保持按钮的原始颜色。例如,如果Buttonprimary,保持原色,如果Buttonsecondary,保持二次色。

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

当然,我不想为每个代码编写一个自定义代码。我甚至可以通过创建一个围绕MUI按钮的 Package 器并在代码中的任何地方使用该 Package 器来实现这一点。但我想通过重写主题来以MUI的方式实现这一点。
如何实施全球解决方案?

of1yzvn4

of1yzvn41#

对于默认样式中处理禁用状态的方式,我认为您需要重新定义覆盖中的默认颜色,以便使其工作。
在源代码中,您可以找到如何为文本、轮廓和包含的变量定义默认颜色。
下面的示例演示了如何通过在"&.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>
  );
}

gopyfrb3

gopyfrb32#

这是你想要的吗?只是不要在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属性,请确保你看了一下,也同意了。我在下面的例子中展示了它们。

现场演示

nxowjjhe

nxowjjhe3#

我现在有个好办法。
我使用ownerState props来获取颜色属性。接下来,我在主题的调色板中使用它。下面的示例演示了如何为contained按钮执行此操作。

let theme = createTheme({
  palette: {
    // Your custom palette
  },
});

theme = createTheme(theme, {
  components: {
    MuiButton: {
      defaultProps: {
        disableElevation: true
      },
      styleOverrides: {
        root: ({ ownerState }) => ({
          '&.MuiButton-contained.Mui-disabled': {
            backgroundColor: theme.palette[ownerState.color].main,
          }
        }),
      }
    }
  }
});

相关问题