如何覆盖 MUI 按钮，以便颜色道具仍然有效

Question

我已经尝试重写 MUI 按钮组件，虽然更改都是一致的，但颜色属性现在无法更改按钮的颜色。

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

我怎样才能使颜色道具仍然改变背景颜色？目前颜色默认为透明。

Answer 1

如 Creating new component variants 部分所述，您还需要为 color = "secondary"

创建另一个变体

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

如何覆盖 MUI 按钮，以便颜色道具仍然有效

How to override MUI button, so that the color prop still works

reactjs

material-ui