无法将组件属性转发到样式化 Mui 按钮

Question

我有一个样式化的 MUI 按钮：

const SecondaryButton = styled(Button)<ButtonProps>(({ theme }) => ({
  ...
}));

export default SecondaryButton;

如果我像这样使用它：

<label htmlFor="contained-button-file">
   <input id="contained-button-file" multiple type="file" hidden onChange={this.selectFiles} />
      <SecondaryButton component='span'>
            Dateiauswahl
       </SecondaryButton>
</label>

我收到以下打字稿错误：

Type '{ children: string; component: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...> & MUIStyledCommonProps<...>'.
Property 'component' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...> & MUIStyledCommonProps<...>'

如果我使用标准 MUI 按钮，则不会出现错误。据我了解，我的样式按钮应该只转发属性。因此，它应该有效。

任何帮助表示赞赏。

Answer 1

正如文档中提到的，由于一些限制，我们必须通过类型转换来绕过这个问题，至少在撰写本文时是这样

const SecondaryButton = styled(Button)(({ theme }) => ({
  // ...
})) as typeof Button;
    ^^^^^^^^^^^^^^^^

export default SecondaryButton;

参考

component道具的并发症