能否让TypeScript为单仓库多目录的独立MUI主题应用专属模块扩充？

这个问题的核心在于TypeScript的全局模块扩充机制——只要你的类型文件被包含在编译范围内，所有针对@mui/material/styles的模块扩充都会被合并，导致A和B的断点类型互相污染。下面是两种可行的解决方案，帮你实现每个目录的类型隔离：

方案1：局部自定义Theme类型（推荐） #

完全避开全局模块扩充，为每个目录单独定义专属的Theme类型，从根源上避免冲突。

步骤1：在A目录创建专属主题配置文件 #

A/theme.ts：

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

// 自定义断点类型，移除默认断点并添加mobile
type CustomBreakpoints = {
  mobile: number;
  // 保留MUI断点核心方法（按需添加）
  up: (key: 'mobile') => string;
  down: (key: 'mobile') => string;
};

// 自定义Theme类型，替换默认的breakpoints字段
export type Theme = Omit<import('@mui/material/styles').Theme, 'breakpoints'> & {
  breakpoints: CustomBreakpoints;
};

// 创建主题并断言为自定义Theme类型
const aThemeOptions: ThemeOptions = {
  breakpoints: {
    values: {
      mobile: 300,
    },
  },
};

export const aTheme = createTheme(aThemeOptions) as Theme;

// 导出带类型约束的ThemeProvider
export const AThemeProvider = ThemeProvider<Theme>;

步骤2：修改A/index.tsx使用局部类型 #

import { AThemeProvider, aTheme, Theme } from './theme';
import { Box } from '@mui/material';

const A = () => (
  <AThemeProvider theme={aTheme}>
    {/* 这里的breakpoints会自动识别mobile类型，不会和B目录冲突 */}
    <Box sx={{ width: ({ breakpoints }: { breakpoints: Theme['breakpoints'] }) => breakpoints.mobile }} />
  </AThemeProvider>
);

export default A;

步骤3：为B目录重复相同操作 #

B/theme.ts：

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

type CustomBreakpoints = {
  desktop: number;
  up: (key: 'desktop') => string;
  down: (key: 'desktop') => string;
};

export type Theme = Omit<import('@mui/material/styles').Theme, 'breakpoints'> & {
  breakpoints: CustomBreakpoints;
};

const bThemeOptions: ThemeOptions = {
  breakpoints: {
    values: {
      desktop: 1200,
    },
  },
};

export const bTheme = createTheme(bThemeOptions) as Theme;
export const BThemeProvider = ThemeProvider<Theme>;

B/index.tsx：

import { BThemeProvider, bTheme, Theme } from './theme';
import { Box } from '@mui/material';

const B = () => (
  <BThemeProvider theme={bTheme}>
    <Box sx={{ width: ({ breakpoints }: { breakpoints: Theme['breakpoints'] }) => breakpoints.desktop }} />
  </BThemeProvider>
);

export default B;

方案2：基于目录的tsconfig隔离 #

如果你更倾向于使用MUI官方的模块扩充方式，可以为每个目录单独配置tsconfig，让TypeScript在处理不同目录时加载对应的类型扩充文件。

步骤1：创建目录专属tsconfig #

A/tsconfig.json：

{
  "extends": "../tsconfig.json",
  "include": ["./**/*"],
  "exclude": ["../B/**/*"]
}

B/tsconfig.json同理：

{
  "extends": "../tsconfig.json",
  "include": ["./**/*"],
  "exclude": ["../A/**/*"]
}

步骤2：将模块扩充移到目录专属的类型文件 #

A/types/mui.d.ts：

declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true;
  }
}

B/types/mui.d.ts：

declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
    desktop: true;
  }
}

这种方法需要针对不同目录单独编译（比如tsc -p A/tsconfig.json），适合需要严格隔离类型的场景，但会增加一点编译配置的复杂度。

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