如何为Styled MUI DataGridPro组件传递TypeScript类型参数？

当你用MUI的styled工具封装DataGridPro后，默认会丢失原组件的泛型支持，导致无法像原生组件那样传递AuditLogShape这类类型参数。以下是几种可行的解决方法：

方法1：为styled组件添加泛型类型断言 #

直接通过类型断言让styled组件重新支持泛型传递，这是最直接的方式：

import { styled } from '@mui/material/styles';
import DataGridPro, { DataGridProps } from '@mui/x-data-grid-pro';

export const StyledDataGridPro = styled(DataGridPro)<DataGridProps<unknown>>(() => ({
  // 你的自定义样式
  '& .MuiDataGrid-headerCell': {
    backgroundColor: '#f5f5f5',
  },
  '& .MuiDataGrid-cell': {
    padding: '10px 16px',
  }
})) as <R extends unknown>(props: DataGridProps<R>) => JSX.Element;

使用时和原生DataGridPro完全一致，类型校验会正常工作：

<StyledDataGridPro<AuditLogShape>
  rows={auditLogData}
  columns={auditLogColumns}
  onRowClick={(params) => {
    // params.row会自动推断为AuditLogShape类型
    handleRowClick(params.row.id);
  }}
/>

方法2：创建泛型包装组件 #

如果觉得类型断言不够直观，可以用一个泛型函数组件包裹styled后的基础组件：

import { styled } from '@mui/material/styles';
import DataGridPro, { DataGridProps } from '@mui/x-data-grid-pro';

// 先定义不带泛型的基础styled组件
const BaseStyledDataGridPro = styled(DataGridPro)(() => ({
  // 自定义样式
}));

// 封装成泛型组件
export function StyledDataGridPro<R>(props: DataGridProps<R>) {
  return <BaseStyledDataGridPro {...props} />;
}

这种方式的使用体验和原生组件完全一致，所有类型校验都会正常生效。

方法3：扩展原组件类型保留泛型 #

通过扩展DataGridPro的原生类型，明确指定组件支持泛型参数：

import { styled } from '@mui/material/styles';
import DataGridPro from '@mui/x-data-grid-pro';

// 复用原组件的props类型并保留泛型
type StyledDataGridProProps<R> = React.ComponentProps<typeof DataGridPro>;

export const StyledDataGridPro = styled(DataGridPro)<StyledDataGridProProps<unknown>>(() => ({
  // 自定义样式
})) as <R>(props: StyledDataGridProProps<R>) => JSX.Element;

原理说明 #

MUI的styled工具在处理泛型组件时，默认会将泛型参数固化为unknown，导致无法传递自定义类型。通过上述方法，我们手动恢复了组件的泛型支持，让类型系统能够正确推断rows、回调函数参数等的类型。

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