如何覆盖 MUI 按钮，以便 color 属性仍然有效

Question

我尝试覆盖 MUI 按钮组件，虽然更改全部一致，但颜色属性现在无法更改按钮的颜色。

    cont theme = useTheme(
      components: {
        MuiButton: {
          variants: [
            {
              props: { variant: "flat" },
              style: {
                borderWidth: 5,
                borderRadius: 5,
                borderStyle: "solid",
                "&:hover": {
                  pointerEvents: "none",
                },
              },
            },
          ],
        },
      },
)

我怎样才能做到这一点，以便 color 属性仍然会改变 backgroundColor ？目前颜色默认为透明。

Answer 1

如创建新组件变体部分所述，您还需要为

color = "secondary"

创建另一个变体

variants: [
  {
    props: { variant: "flat" },
    style: {
      borderWidth: 5,
      borderRadius: 5,
      borderStyle: "solid"
    }
  },
  {
    props: { variant: "flat", color: "secondary" },
    style: {
      borderColor: "red"
    }
  }
]

Answer 2

我没有从 @Hamidreza 发布的 MUI 文档中找到非常令人满意的官方答案，因为这意味着对于每种默认颜色，都必须手动添加一个变体，而像“outlined”这样的默认变体会自动继承颜色中设置的颜色支柱。所以我使用了另一种有点像这样的黑客方法：

MuiButton: {
    variants: [
      {
        props: { variant: 'dashed' },
        style: {
          borderStyle: 'dashed',
          borderWidth: 2,
        },
      },
    ],
    styleOverrides: {
      root: ({ ownerState, theme }) => ({
        ...(ownerState.variant === 'dashed' && {
          borderColor: theme.palette[ownerState.color as ButtonColorTypes]?.main || theme.palette.primary.main,
        }),
      }),
    },
  }

使用 Typescript 时，您必须创建一个仅包含作为 MUI 调色板键的颜色名称的类型，并将 PaletteColorOptions 类型作为值，例如 Primary、Secondary、Error、Warning、Info、Success 以避免 ts 错误。