TypeScript中为Styled Components添加额外Props的解决方案

直接用as typeof Button触发类型错误的核心原因是：原始Button类型不包含你自定义的foo/bar属性，强制类型转换会导致类型不兼容。正确做法是合并MUI原生组件类型与自定义Props，无需强制覆盖类型：

步骤1：定义合并后的Props类型 #

导入MUI Button的原生Props类型，与自定义Props做交叉类型合并：

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

// 合并原生ButtonProps与自定义属性
type CustomButtonProps = ButtonProps & {
  foo: string;
  bar: string;
};

步骤2：创建Styled组件 #

将合并后的类型传入styled泛型参数，无需额外的as typeof Button断言：

const CustomButton = styled(Button)<CustomButtonProps>({
  // 自定义样式代码
});

为什么这样可行？ #

• 交叉类型ButtonProps & {foo: string; bar: string}既保留了MUI Button的所有原生Props类型，又新增了自定义属性
• styled会自动基于传入的组件和Props类型生成正确的组件类型，TypeScript可以完整识别所有Props，不会丢失类型注解
• 完全适配官方文档提到的component prop类型限制，使用时可正常传递component属性和自定义Props：

  <CustomButton component="a" foo="hello" bar="world">自定义按钮</CustomButton>
  

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