can't create custom variant for MuiSelect

Rostyk 0
Viewed 19

Theme:

  components: {
    MuiSelect: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed red`,
          },
        },
      ],
    },
  },

below

declare module '@mui/material/Select' {
  interface SelectPropsVariantOverrides {
    dashed: true;
  }
}

I do everything as here: https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

I get this error:

enter image description here

When I use their example - everything works but they use MuiButton, I need for MuiSelect

react-mui react-typescript reactjs
2 Answers
Rostyk0

If you check the documentation: https://mui.com/material-ui/api/select/

You can only add prop variants to props that they allow you.

They say only those are allowd: 'filled' | 'outlined' | 'standard'

When they say string then you are allowed to add your custom prop variants.

Check this: https://mui.com/material-ui/api/text-field/

In section for 'size': they say: 'medium' | 'small' | string. That string over there means you can add your custom variants, if the keyword string does not exist, you can't add custom prop variants

Oktay Yuzcan0
Related