MUI v5（Styled+TypeScript）System属性传递报错求助

问题根源 #

你定义的TitleStyled组件仅声明了自定义的isSubtitle属性类型，未继承Typography组件的完整Props类型，导致TypeScript无法识别component这个Typography原生属性。

修正步骤 #

1. 导入Typography的Props类型
   从@mui/material/Typography中导入其Props类型：

   import type { TypographyProps } from '@mui/material/Typography';
   

2. 合并自定义属性与Typography Props
   在styled组件的泛型中，将自定义属性与TypographyProps合并，同时保留shouldForwardProp排除isSubtitle：

   const TitleStyled = styled(Typography, {
     shouldForwardProp: (prop) => prop !== "isSubtitle",
   })<TypographyProps & { isSubtitle?: string; }>(({ isSubtitle }) => ({
     fontWeight: 700,
     fontSize: isSubtitle ? '18px' : '24px',
     lineHeight: isSubtitle ? '21px' : '28px',
     letterSpacing: 'inherit'
   }))
   

3. 验证组件使用
   此时TitleStyled会正确识别component等Typography的所有原生属性，编辑器报错将消失：

   return (
     <TitleStyled
       component={customTag}
       isSubtitle={type}
     >
       {textTitle}
     </TitleStyled>
   );
   

额外说明 #

你之前尝试的as typeof Typography和paths配置未触及问题核心，因为报错本质是styled组件的类型未正确继承Typography的Props。完成上述类型合并后，无需额外配置即可解决编辑器报错。

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