如何扩展Material UI Styled Component类型解决TableCellProps类型错误？

问题场景 #

使用Material-UI的styled工具创建StyledTableCell组件时，跨文件使用会触发TypeScript错误ts(2322)，提示component、scope、colSpan属性不存在于StyledComponent类型中。同一文件内使用无问题，尝试shouldForwardProp和手动扩展类型均未解决。

相关组件定义代码：

import { styled, TableCell, tableCellClasses } from '@mui/material';

const StyledTableCell = styled(TableCell, {
  shouldForwardProp: (prop) => prop === 'component',
})(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

export default StyledTableCell;

跨文件使用时的报错代码：

import StyledTableCell from './StyledTableCell';

// 此处触发ts(2322)错误
<StyledTableCell component="th" scope="row" colSpan={2}>
  内容
</StyledTableCell>

用户尝试的无效类型扩展：

const StyledTableCell = styled(TableCell)(
  ({ theme }) => ({
    [`&.${tableCellClasses.head}`]: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    },
    [`&.${tableCellClasses.body}`]: {
      fontSize: 14,
    },
  })
) as React.ComponentType<TableCellProps> & {
  component?: string;
  scope?: string;
  align?: string;
};

解决方案 #

1. 修正shouldForwardProp配置 #

问题核心是shouldForwardProp仅允许了component属性，scope、colSpan等原生TableCell属性被过滤，导致TypeScript无法识别。需要将所有需要传递的属性加入允许列表：

import { styled, TableCell, tableCellClasses, TableCellProps } from '@mui/material';

const StyledTableCell = styled(TableCell, {
  shouldForwardProp: (prop) => 
    // 保留需要传递的原生属性，排除styled内部使用的属性
    ['component', 'scope', 'colSpan', 'align'].includes(prop as string),
})(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

更通用的写法（仅排除styled注入的theme属性，保留其余所有原生属性）：

const StyledTableCell = styled(TableCell, {
  shouldForwardProp: (prop) => prop !== 'theme',
})(({ theme }) => ({
  // 样式代码不变
}));

2. 正确的类型扩展方式 #

如果需要手动指定类型，直接基于TableCellProps让组件继承所有原生属性即可：

import { styled, TableCell, tableCellClasses, TableCellProps } from '@mui/material';

const StyledTableCell = styled(TableCell)<TableCellProps>(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

3. 检查导出导入方式 #

确保组件导出、导入路径正确，避免因导出方式导致的类型丢失。比如使用命名导出：

// 组件定义文件
export const StyledTableCell = styled(TableCell, {...});

// 使用文件
import { StyledTableCell } from './StyledTableCell';

原理说明 #

Material-UI的styled工具会默认过滤部分属性，shouldForwardProp用于控制哪些属性传递给底层的TableCell组件。同时，让Styled组件明确继承TableCellProps类型，能让TypeScript自动识别所有原生TableCell属性。

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