MUI 变体 - 类型“string”不可分配给类型““icon”| “仅图标”| “文本”| “概述”| “包含” | 不明确的'

Question

我想在 MUI v5 中使用自定义变体。为什么不能使用文档中概述的自定义变体：https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

\n

declare module "@mui/material/Button" {\n  interface ButtonPropsVariantOverrides {\n    icon: true;\n    iconOnly: true;\n  }\n}\n\n\nconst muiButton = {\n  MuiButton: {\n    variants: [\n      {\n        props: { variant: "icon" },\n        style: {\n          background: palette.primary.main,\n        },\n      },\n    ],\n  },\n};\n\ncreateTheme({\n  components: {\n     ...muiButton \n  }\n})\n

\n

ts-错误

\n

TS2322: Type \'{ MuiButton: { styleOverrides: { root: { fontStyle: string; fontSize: number; fontWeight: number; color: string; minWidth: string; borderRadius: number; "text-transform": string; boxShadow: string; "&.Mui-disabled": { ...; }; }; outlined: { ...; }; sizeSmall: { ...; }; sizeMedium: { ...; }; sizeLarge: { ...; }; }; v...\' is not assignable to type \'Components<BaseTheme>\'. \xc2\xa0\xc2\xa0The types of \'MuiButton.variants\' are incompatible between these types. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'({ props: { variant: string; size?: undefined; }; style: { background: string; color: string; "& .MuiSvgIcon-root": { height: number; }; "&.MuiButton-icon": { paddingRight: number; paddingLeft: number; }; ... 8 more ...; "&.Mui-disabled": { ...; }; }; } | { ...; } | { ...; } | { ...; })[]\' is not assignable to type \'{ props: Partial<ButtonProps<"button", {}>>; style: Interpolation<{ theme: Theme; }>; }[]\'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'{ props: { variant: string; size?: undefined; }; style: { background: string; color: string; "& .MuiSvgIcon-root": { height: number; }; "&.MuiButton-icon": { paddingRight: number; paddingLeft: number; }; ... 8 more ...; "&.Mui-disabled": { ...; }; }; } | { ...; } | { ...; } | { ...; }\' is not assignable to type \'{ props: Partial<ButtonProps<"button", {}>>; style: Interpolation<{ theme: Theme; }>; }\'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'{ props: { variant: string; size?: undefined; }; style: { background: string; color: string; "& .MuiSvgIcon-root": { height: number; }; "&.MuiButton-icon": { paddingRight: number; paddingLeft: number; }; ... 8 more ...; "&.Mui-disabled": { ...; }; }; }\' is not assignable to type \'{ props: Partial<ButtonProps<"button", {}>>; style: Interpolation<{ theme: Theme; }>; }\'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0The types of \'props.variant\' are incompatible between these types. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\n

\n

\xc2\xa0Type \'string\' 不可分配给类型 \'"icon" | “仅图标”| “文本”| “概述”| “包含” | 不明确的\'。

\n

\n

Answer 1

您必须缩小props.variant到可接受的类型，string太宽泛，MUI 无法string在这里使用。

\n

做这个：

\n

props: { variant: "icon" as const }\n

\n

\xe2\x80\xa6 或这个：

\n

props: { variant: "icon" } as const\n

\n

\xe2\x80\xa6 或这个：

\n

import { ButtonProps } from "@mui/material"\n

\n

props: { variant: "icon" } as ButtonProps\n

\n