MuiLoadingButton在createTheme配置中出现TypeScript错误的解决方法

问题原因 #

MuiLoadingButton是@mui/lab包提供的扩展组件，并非Material UI核心组件，因此默认的Components类型定义中不包含该组件，导致TypeScript无法识别对应的配置项。

解决方案 #

• 扩展Material UI组件类型定义
  在项目中创建一个TypeScript类型声明文件（如src/mui.d.ts），手动添加MuiLoadingButton的类型定义：

  import type { LoadingButtonProps } from '@mui/lab/LoadingButton';
  import type { Components } from '@mui/material/styles';
  
  declare module '@mui/material/styles' {
    interface Components {
      MuiLoadingButton?: {
        defaultProps?: Partial<LoadingButtonProps>;
        styleOverrides?: {
          root?: React.CSSProperties;
          // 可按需添加其他需要覆盖的样式键
        };
      };
    }
  }
  

• 确保TypeScript识别类型文件
  检查tsconfig.json的include配置，确保包含上述类型文件：

  {
    "compilerOptions": { /* 你的编译配置 */ },
    "include": ["src/**/*", "src/mui.d.ts"]
  }
  

• 正常使用createTheme配置
  现在可以在createTheme中正常配置MuiLoadingButton，不会再触发TypeScript错误：

  import { createTheme } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiLoadingButton: {
        defaultProps: {
          loadingPosition: 'end',
          loading: true,
          variant: 'contained'
        },
      },
      // 其他组件配置
    },
  });
  

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