如何让@mui/system识别自定义主题配置？

要让@mui/system（包括Stack的sx属性）识别你的自定义主题配置，核心是通过TypeScript类型扩展增强MUI的Theme接口，具体步骤如下：

1. 创建主题类型扩展文件 #

在项目中新建类型声明文件（比如src/theme.d.ts），扩展MUI的Theme和ThemeOptions接口，添加自定义主题字段：

// src/theme.d.ts
import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions } from '@mui/material/styles';

// 扩展MUI的Theme和ThemeOptions，添加自定义属性
declare module '@mui/material/styles' {
  interface Theme extends MuiTheme {
    // 示例：添加自定义颜色组
    customColors: {
      primary: string;
      secondary: string;
    };
    // 示例：添加自定义间距
    customSpacing: {
      large: number;
      small: number;
    };
  }

  interface ThemeOptions extends MuiThemeOptions {
    customColors?: {
      primary?: string;
      secondary?: string;
    };
    customSpacing?: {
      large?: number;
      small?: number;
    };
  }
}

// 同步扩展@mui/system的Theme类型，确保sx属性能识别自定义字段
declare module '@mui/system' {
  interface Theme extends MuiTheme {}
}

2. 创建包含自定义配置的主题 #

在主题文件（比如src/theme.ts）中，使用createTheme传入自定义配置：

// src/theme.ts
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  customColors: {
    primary: '#1a73e8',
    secondary: '#5f6368',
  },
  customSpacing: {
    large: 32,
    small: 8,
  },
  // 保留MUI默认主题配置（如palette、typography等）
});

export default theme;

3. 在组件中通过sx直接使用自定义主题 #

现在Stack的sx属性可以直接访问自定义主题字段，且TypeScript会提供类型提示：

import Stack from '@mui/material/Stack';

function MyComponent() {
  return (
    <Stack
      sx={{
        backgroundColor: (theme) => theme.customColors.primary,
        padding: (theme) => theme.customSpacing.large,
        gap: (theme) => theme.customSpacing.small,
      }}
    >
      <p>使用自定义主题的内容</p>
    </Stack>
  );
}

这种方式比用styled扩展组件更高效，无需额外封装组件，直接通过sx就能利用自定义主题配置。

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