如何无需修改MUI源码，从Theme Provider扩展组件添加自定义Props？

问题背景 #

想要通过Theme Provider扩展MUI组件的Props，比如给IconButton添加square属性，尝试了以下代码：

import { Components, Theme } from "@mui/material";

export const MuiIconButton: Components<Theme>['MuiIconButton'] = {
  defaultProps: {
    square: true
  },
  styleOverrides: {
    root: ({ ownerState }) => ({
      // 希望访问square prop
      borderRadius: ownerState.square ? 0 : 50,
    })
  }
};

declare module "@mui/material/IconButton" {
  interface IconButtonPropsOverrides {
    square: boolean;
  }
}

但查看IconButton.d.ts发现，文件中仅定义了IconButtonPropsColorOverrides和IconButtonPropsSizeOverrides，没有可用的Props覆盖接口，想知道无需修改MUI源码的通用实现方法。

解决方案 #

要添加新的Props，正确的方式是扩展IconButton的核心Props接口，PropsOverrides仅用于修改现有Props的可选值范围（比如颜色、尺寸的枚举），不适合添加全新属性。具体实现如下：

1. 扩展IconButtonProps接口，添加自定义属性：

declare module "@mui/material/IconButton" {
  interface IconButtonProps {
    square?: boolean;
  }
}

2. MUI会自动将Props中定义的属性同步到ownerState，所以在styleOverrides里可以直接访问该属性。完整配置代码：

import { Components, Theme } from "@mui/material";

export const MuiIconButton: Components<Theme>['MuiIconButton'] = {
  defaultProps: {
    square: true // 设置默认值
  },
  styleOverrides: {
    root: ({ ownerState }) => ({
      borderRadius: ownerState.square ? 0 : '50%',
    })
  }
};

// 扩展IconButtonProps接口，添加square属性
declare module "@mui/material/IconButton" {
  interface IconButtonProps {
    square?: boolean;
  }
}

3. 使用组件时可直接传入square属性：

<IconButton square={false}>
  <FavoriteIcon />
</IconButton>

通用扩展逻辑 #

对于所有MUI组件，添加自定义Props的通用步骤：

• 找到组件对应的核心Props接口（命名规则为[ComponentName]Props，如ButtonProps、TextFieldProps）
• 通过模块扩充（Module Augmentation）扩展该接口，添加自定义属性
• 在组件的Theme配置中，通过ownerState访问该属性来应用样式或逻辑

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