Material UI 5.0 + TypeScript自定义主题报错，正确实现方式是什么？

问题根源 #

代码存在2个核心错误：

1. 主题类型导出语法错误：export const CustomTheme= typeof theme; 中typeof是TypeScript类型运算符，不能直接赋值给普通变量，需要用类型导出语法。
2. 不需要手动给sx属性的回调参数标注类型，MUI 会自动从ThemeProvider注入的主题中推导出你扩展的类型，手动标注反而会引发类型冲突。

修正步骤 #

1. 修正theme.ts文件 #

已有的模块扩展声明是正确的，只需要调整最后一行的类型导出逻辑，甚至可以不用单独导出自定义主题类型，模块声明已经全局扩展了MUI原生的Theme接口：

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

declare module '@mui/material/styles' {
    interface Theme {
        custom: {
            buttonWidth: string;
        };
    }
    interface ThemeOptions {
        custom: {
            buttonWidth: string;
        };
    }
}

export const theme = createTheme({
    palette: {
        primary: {
            main: '#00F',
        },
    },
    typography: {
        body1: {
            fontFamily: 'Comic Sans',
        },
    },
    custom: {
        buttonWidth: '200px',
    },
});

// 若确实需要单独导出主题类型，使用type关键字
export type CustomTheme = typeof theme;

2. 全局注入自定义主题 #

确保应用根组件使用ThemeProvider包裹，传入你自定义的theme：

import { ThemeProvider } from '@mui/material/styles';
import { theme } from './theme';

// 根组件渲染逻辑示例
ReactDOM.createRoot(document.getElementById('root')!).render(
  <ThemeProvider theme={theme}>
    {/* 你的业务组件 */}
  </ThemeProvider>
)

正确用法示例 #

sx属性的回调参数不需要手动标注类型，TypeScript会自动识别你扩展的custom字段：

<Button sx={{ width: theme => theme.custom.buttonWidth }} />

如果需要单独提取样式逻辑，直接引用MUI原生的Theme类型即可，已经包含你扩展的字段：

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

const getButtonStyle = (theme: Theme) => ({
  width: theme.custom.buttonWidth,
  borderRadius: theme.shape.borderRadius
})

<Button sx={getButtonStyle} />

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