如何为Material-UI Button添加自定义尺寸与变体并支持VS Code自动补全

嘿，我懂你的需求——既要给Material-UI的Button加自定义尺寸和变体，还得让VS Code能自动补全这些新选项，不用每次都写自定义CSS或者依赖withStyles对吧？你之前试的代码没生效，主要是写法不对，而且没处理类型扩展这关键一步。下面一步步给你搞定：

一、新增自定义尺寸（支持自动补全） #

要让VS Code识别新尺寸并给出补全，类型扩展是核心（这里以TypeScript为例，JS项目也可参考）：

1. 首先扩展Material-UI的Button尺寸类型
   在项目里新建一个类型声明文件（比如src/types/material-ui.d.ts），写入：

   declare module '@mui/material/Button' {
     interface ButtonPropsSizeOverrides {
       'extra-large': true; // 新增你想要的尺寸名称，比如extra-large
       // 还可以继续加其他自定义尺寸，比如mini
     }
   }
   

2. 在主题中配置新尺寸的样式
   注意Material-UI v5推荐用components替代旧版的overrides，写法如下：

   import { createTheme } from '@mui/material/styles';
   
   const theme = createTheme({
     components: {
       MuiButton: {
         styleOverrides: {
           // 样式键名要和尺寸名称对应，驼峰格式：size + 首字母大写的尺寸名
           sizeExtraLarge: {
             height: '56px',
             padding: '0 32px',
             fontSize: '18px',
             // 按需添加其他样式，比如圆角、字体 weight 等
           },
         },
         // 可选：如果想让新尺寸成为默认值，可修改defaultProps
         // defaultProps: {
         //   size: 'extra-large',
         // },
       },
     },
   });
   

   如果是v4版本，把components换成overrides即可，样式键名保持一致。

这样配置后，你写<Button size="extra-large">时，VS Code就会自动补全这个值，样式也会直接生效。

二、新增自定义变体（支持自动补全） #

和新增尺寸逻辑类似，先扩展类型，再配置样式：

1. 扩展Button变体类型
   还是在刚才的material-ui.d.ts里添加：

   declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
       'custom-filled': true; // 自定义变体名称，比如自定义填充样式
       'outline-rounded': true; // 另一个自定义变体示例
     }
   }
   

2. 在主题中配置变体样式
   用variants数组定义新变体的样式规则：

   const theme = createTheme({
     components: {
       MuiButton: {
         variants: [
           {
             props: { variant: 'custom-filled' },
             style: {
               backgroundColor: '#2ecc71',
               color: '#fff',
               border: 'none',
               borderRadius: '8px',
               '&:hover': {
                 backgroundColor: '#27ae60',
               },
             },
           },
           {
             props: { variant: 'outline-rounded', color: 'primary' },
             style: {
               borderWidth: '2px',
               borderRadius: '24px',
               '&:hover': {
                 borderWidth: '2px', // 避免hover时边框变宽
               },
             },
           },
         ],
       },
     },
   });
   

之后团队直接写<Button variant="custom-filled">或者<Button variant="outline-rounded" color="primary">就能用，VS Code也会自动补全这些变体选项，完全不用写自定义CSS类。

为什么你之前的代码没生效？ #

你之前写的overrides里的写法存在几个问题：

• 尺寸样式应该放在sizeXXX键名下，而非variant字段里；
• v5版本更推荐用components替代overrides来配置组件样式；
• 最重要的是，没有扩展TypeScript类型，所以即使样式写对了，VS Code也不会识别新值，更不会给出自动补全。

如果是JavaScript项目，虽然没有类型检查，但可以通过类似的模块声明来提示VS Code识别新选项，主题样式配置的逻辑和上面一致。

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