自定义Material UI主题在Emotion组件中丢失自定义字段的问题求助

1. 修正主题类型定义，同步覆盖Emotion的Theme接口 #

你当前仅扩充了MUI的Theme类型，但Emotion styled组件中的props.theme对应@emotion/react的Theme接口，需要让它继承MUI的自定义主题类型。修改theme.d.ts如下：

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

// 扩充MUI主题类型
declare module '@mui/material/styles' {
  interface Theme {
    borders: {
      lrg: string; // 建议替换为具体类型，避免用any
    };
  }
  interface ThemeOptions {
    borders: {
      lrg: string;
    };
  }
}

// 让Emotion的Theme继承MUI自定义主题
declare module '@emotion/react' {
  interface Theme extends MuiTheme {}
}

2. 确保ThemeProvider正确包裹组件树 #

确认根组件使用@mui/material/styles导出的ThemeProvider包裹，且传入自定义创建的主题：

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

const customTheme = createTheme({
  borders: {
    lrg: '4px solid #2196f3' // 示例自定义边框配置
  },
  // 其他主题配置项
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 所有使用styled组件的子内容必须放在该Provider内部 */}
      <YourTargetComponent />
    </ThemeProvider>
  );
}

3. 验证styled组件的主题获取逻辑 #

如果问题仍存在，可尝试MUI styled的回调模式（更稳定的主题访问方式）：

import { styled, useTheme } from '@mui/material/styles';

function YourTargetComponent() {
  const theme = useTheme();
  
  // 回调式写法，直接接收theme参数
  const StyledBox = styled('div')(({ theme }) => ({
    backgroundColor: 'red',
    border: theme.borders.lrg // 此处可直接访问自定义borders
  }));

  return <StyledBox>测试内容</StyledBox>;
}

额外排查点 #

• 检查是否存在多层ThemeProvider嵌套，导致子组件获取到外层默认主题而非自定义主题
• 确认createTheme时borders配置未被其他逻辑覆盖
• 重启TypeScript服务（VS Code可按Ctrl+Shift+P执行TypeScript: Restart TS Server），确保类型定义生效

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