如何将自定义组件加入MUI Theme Options并解决样式覆盖类型错误？

错误原因分析 #

你之前的问题出在两个核心点：

1. 模块扩展方式错误：直接将自定义组件的类型赋值给Components接口中的MyComponent，但MUI的Components接口要求每个字段是样式配置结构，而非组件本身的Props类型。
2. 组件未读取Theme样式：组件没有从Theme中提取styleOverrides的逻辑，同时类型不匹配导致TypeScript报错。

正确实现步骤 #

1. 正确扩展MUI的Components接口 #

需要按照MUI的样式配置规范，定义自定义组件的styleOverrides结构：

import type { Components } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Components {
    MyComponent?: {
      // 定义自定义槽位的样式结构，比如root、bottom
      styleOverrides?: {
        root?: React.CSSProperties;
        bottom?: React.CSSProperties;
      };
    };
  }
}

2. 定义组件并整合Theme样式 #

组件需要通过useTheme获取Theme中的样式配置，同时支持传入自定义样式覆盖Theme配置：

import { useTheme } from '@mui/material/styles';
import type { CSSProperties } from 'react';

type MyComponentProps = {
  prop1: string;
  prop2: string;
  // 可选：允许直接传入样式覆盖Theme配置
  styleOverrides?: {
    root?: CSSProperties;
    bottom?: CSSProperties;
  };
};

const MyComponent = ({ prop1, prop2, styleOverrides = {} }: MyComponentProps) => {
  const theme = useTheme();
  
  // 合并Theme样式与组件传入的样式
  const rootStyles = {
    ...theme.components?.MyComponent?.styleOverrides?.root,
    ...styleOverrides.root,
  };
  const bottomStyles = {
    ...theme.components?.MyComponent?.styleOverrides?.bottom,
    ...styleOverrides.bottom,
  };

  return (
    <div style={rootStyles}>
      <div>{prop1}</div>
      <div>{prop2}</div>
      {/* 应用bottom槽位的样式 */}
      <div style={bottomStyles}>底部内容</div>
    </div>
  );
};

3. 配置Theme Options #

现在可以在Theme的components中正常配置自定义组件的样式覆盖，TypeScript不会再报错：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MyComponent: {
      styleOverrides: {
        bottom: {
          color: 'red',
          fontSize: '14px',
        },
        root: {
          padding: '16px',
          backgroundColor: '#f5f5f5',
        },
      },
    },
  },
});

关键注意事项 #

• 自定义槽位（比如bottom）的名称可以自己定义，但要保证接口、组件、Theme配置三者的名称一致。
• 样式合并顺序：组件传入的styleOverrides优先级高于Theme中的配置，这样支持局部覆盖全局样式。

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