如何使用 TS Augmentation 向 MUI 组件添加新道具答案

【问题标题】：How to add a new prop to MUI component with TS Augmentation如何使用 TS Augmentation 向 MUI 组件添加新道具
【发布时间】：2022-12-22 08:03:53
【问题描述】：

我正在使用 MUI v5，我正在尝试向 TableRow 组件添加一个新道具。关于模块扩充的 MUI 文档缺少一些示例，因为它只展示了如何添加新变体（而不是新道具）。

我试过

declare module '@mui/material/TableRow' {
  interface TableRowProps {
    clickable?: boolean;
  }
}

在我的主题中，我添加了样式：

MuiTableRow: {
    styleOverrides: {
      root: {
        height: '80px',
      },
      head: {
        height: 'unset',
      },
    },
    variants: [
      {
        props: { clickable: true },
        style: {
          '&:hover': {
            cursor: 'pointer',
          },
        },
      },
    ],
  },

我的主题覆盖没有任何 TS 错误，但是在使用该组件时，TS 抛出一个错误，指出 clickable 道具不存在：

我应该如何正确添加这个新道具而不将其包装在新组件中？

【问题讨论】：

你想通过在 TableRow 上增加一个道具来实现什么？ MUI 组件不会对其执行任何操作，它只会传递给 HTML 元素？如果您想要一个“可点击”的 TableRow，难道您不想创建自己的组件来处理 prop，从而为 prop 定义您自己的类型定义吗？

标签： reactjs material-ui

【解决方案1】：

这对我来说似乎是一个打字稿问题，但在 JSX 项目中创建项目时它可以正常工作。

如果你想在 TSX 项目中达到同样的效果，你需要指示打字稿编译器避免对这个特定的东西进行类型检查。

尝试在遇到问题的行之前添加注释 {/* @ts-ignore */} 或 // @ts-ignore。

我在 TSX 中创建了一个虚拟项目来演示这个问题，你可以检查这个 - https://codesandbox.io/s/mui-theme-customisation-xt7yrj

还在 Mui 中提出了这个问题 - https://github.com/mui/material-ui/issues/32539

【讨论】：

【解决方案2】：

您需要在可能命名为TableRowPropsVariantOverrides 的接口中将新道具设置为true（我不确定命名，我相信您可以查看基本代码并查看是否正确，通常是ComponentNamePropsVariantOverrides)

declare module '@mui/material/TableRow' {
  interface TableRowPropsVariantOverrides {
    clickable: true;
  }
}

来源：https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

【讨论】：