MUI variants - Type 'string' is not assignable to type '"icon" | "iconOnly" | "text" | "outlined" | "contained" | undefined'

Issue

I would like to use custom variants in MUI v5. Why cannot use a custom variant as outlined in their documentation: https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

declare module "@mui/material/Button" {
  interface ButtonPropsVariantOverrides {
    icon: true;
    iconOnly: true;
  }
}


const muiButton = {
  MuiButton: {
    variants: [
      {
        props: { variant: "icon" },
        style: {
          background: palette.primary.main,
        },
      },
    ],
  },
};

createTheme({
  components: {
     ...muiButton 
  }
})

ts-error

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>'.   The types of 'MuiButton.variants' are incompatible between these types.     Type '({ 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; }>; }[]'.       Type '{ 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; }>; }'.         Type '{ 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; }>; }'.           The types of 'props.variant' are incompatible between these types.            

 Type 'string' is not assignable to type '"icon" | "iconOnly" | "text" | "outlined" | "contained" | undefined'.

Solution

You have to narrow props.variant down to an acceptable type, string is too broad, MUI can't work with string here.

Do this:

props: { variant: "icon" as const }

… or this:

props: { variant: "icon" } as const

… or this:

import { ButtonProps } from "@mui/material"

props: { variant: "icon" } as ButtonProps

Answered By - Parzh from Ukraine