TypeScript中如何为Material UI的Styled Components定义Props类型？

你不需要把theme定义为组件的外部Props——因为theme是Material UI的styled函数自动注入到样式回调里的参数，不属于组件需要外部传入的Props。你的两种写法都错误地将theme纳入了组件Props类型，导致TypeScript要求你手动传入它，这和预期不符。

正确的处理方式： #

1. 无自定义组件Props的情况

直接利用Material UI自带的Theme类型，让TypeScript自动推断回调中的theme类型，或者手动指定：

import { styled, Switch, Theme } from '@mui/material';

const DarkLightSwitch = styled(Switch)(({ theme }) => ({
  // 这里theme会自动识别为Theme类型，无需额外定义
  '& .MuiSwitch-switchBase': {
    color: theme.palette.mode === 'dark' ? '#fff' : '#000',
  },
  // 其他自定义样式
}));

如果需要更明确的类型提示，可以给回调参数指定类型：

const DarkLightSwitch = styled(Switch)(({ theme }: { theme: Theme }) => ({
  // 样式逻辑
}));

2. 有自定义组件Props的情况

如果你的组件需要接收额外的外部Props（比如自定义尺寸、状态等），只需要定义这些自定义Props的类型，theme依然由styled自动注入，不需要放到泛型的Props类型中：

import { styled, Switch, Theme } from '@mui/material';

// 仅定义组件需要外部传入的Props
type DarkLightSwitchProps = {
  isCompact?: boolean;
};

const DarkLightSwitch = styled(Switch)<DarkLightSwitchProps>(({ theme, isCompact }) => ({
  width: isCompact ? 40 : 60,
  backgroundColor: theme.palette.mode === 'dark' ? '#2d2d2d' : '#f0f0f0',
  // 其他样式
}));

关键说明： #

• styled函数的泛型参数仅用于声明组件对外暴露的Props，而theme是内部注入的上下文参数，不属于这部分。
• 导入Material UI的Theme类型可以获得完整的主题属性提示（比如palette.mode的'light' | 'dark'类型，而非宽泛的string）。

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