按MUI官方教程配置，为何无法为MuiSelect创建自定义变体？

问题分析 #

你按照MUI官方教程为Select组件添加dashed自定义变体时出现类型不匹配错误，但Button组件正常工作。核心原因在于：Select的variant属性并非由SelectPropsVariantOverrides控制，而是直接继承自其底层输入组件（默认是OutlinedInput）的variant类型；同时Select的核心视觉样式由内部输入组件负责，仅配置MuiSelect的变体无法完全生效。

解决步骤 #

1. 修正主题配置
   将自定义变体配置到MuiOutlinedInput（Select默认依赖的输入组件）中，而非MuiSelect：

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

2. 修正类型声明
   扩展InputPropsVariantOverrides接口（OutlinedInput的variant类型继承自此接口），替代原来的SelectPropsVariantOverrides：

   declare module '@mui/material/Input' {
     interface InputPropsVariantOverrides {
       dashed: true;
     }
   }
   

3. 使用自定义变体
   在Select组件中直接指定variant="dashed"即可：

   <Select variant="dashed" labelId="demo-select-label" id="demo-select">
     <MenuItem value={10}>Ten</MenuItem>
     <MenuItem value={20}>Twenty</MenuItem>
     <MenuItem value={30}>Thirty</MenuItem>
   </Select>
   

补充说明 #

如果你的Select组件使用的是其他输入组件（如FilledInput或StandardInput），则需要对应配置MuiFilledInput或MuiInput的变体，并扩展相应的类型声明接口（FilledInputPropsVariantOverrides或InputPropsVariantOverrides）。

内容的提问来源于stack exchange，提问作者Rostyk