TS2322扩展Button时出错，找不到组件属性。正确的打字方式是什么？

Question

我正在从MUI v3迁移到v4。我有一些包装好的Button组件，这些组件在常规的Material UI Button组件上扩展了样式和其他属性。由于升级到v4，因此出现类型错误。我正在使用react-router-dom作为我的路由库。

按照MUI v4文档中更新的Button示例中的说明传递转发的ref组件时（此处：https : //material-ui.com/components/buttons/#third-party-routing-library），出现类型错误component我为包装好的按钮提供的道具类型中不存在。

我已经尝试了Button组件中各种类型的组合，以查看是否还有其他方法可行，但似乎ButtonProps应该根据构建的OverrideProps类型来覆盖它ButtonProps。

这是我在代码沙箱中的复制品：

https://codesandbox.io/s/mui-button-type-issue-dihdd?from-embed

注意：在“代码沙箱”切换类型时，显示类型错误需要一分钟。

Answer 1

发生这种情况有两个原因：

1. ExtendedButton 包含a MUIButton（具有该component属性），但ExtendedButton不是 aMUIButton本身（因此它不具有该component属性）。
2. 该component属性是在 上定义的OverridableComponent，而不是在 上定义的OverrideProps。

您需要实现组件属性并将其传递给MUIButton：

const Button: React.FC<Props & { component: React.ElementType }> = ({
  component,
  // ...
}) => (
  <MUIButton
    component={component}
    // ...
  >
    // ...
  </MUIButton>
)

作为参考，以下是componentMUI 中定义的位置：

export interface OverridableComponent<M extends OverridableTypeMap> {
  <C extends React.ElementType>(props: { component: C } & OverrideProps<M, C>): JSX.Element;
  (props: DefaultComponentProps<M>): JSX.Element;
}