TypeScript中如何为MUI System的styled()组件传递额外自定义props

报错原因 #

TypeScript默认只会为MUI的styled生成组件继承原生标签/被包裹组件的属性，以及MUI内置的theme、sx、as等属性，自定义属性未提前声明类型时就会抛出类型不存在的错误。

解决方法 #

方案1：显式声明自定义props类型（通用推荐） #

步骤如下：

1. 定义自定义props的TypeScript类型
2. 将类型作为泛型参数传给styled()方法
3. （可选但推荐）配置shouldForwardProp过滤自定义prop，避免透传到原生DOM引发浏览器未知属性警告
   完整代码示例：

import { styled } from '@mui/system';

// 自定义props类型定义
type InputFieldProps = {
  width: number | string;
}

const InputField = styled('input', {
  // 过滤不需要透传到原生input标签的自定义prop
  shouldForwardProp: (prop) => prop !== 'width',
})<InputFieldProps>(({ width }) => ({
  width: width
}));

配置完成后即可正常使用：

<InputField width={100} />

方案2：基于MUI内置组件的自定义props扩展 #

如果是给MUI内置组件（比如Button、TextField等）添加自定义props，写法完全一致，仅需要替换被包裹的组件即可：

import Button from '@mui/material/Button';
import { styled } from '@mui/system';

type CustomButtonProps = {
  isRounded: boolean;
}

const CustomButton = styled(Button, {
  shouldForwardProp: (prop) => prop !== 'isRounded',
})<CustomButtonProps>(({ isRounded }) => ({
  borderRadius: isRounded ? '999px' : '4px'
}));

注意事项 #

• 如果你的自定义prop和原生HTML属性重名，必须配置shouldForwardProp过滤，否则会出现属性冲突
• 多个自定义props可以直接在类型定义中扩展即可，无需额外修改其他配置

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