如何将 component 属性与自定义组件一起使用？

Question

我正在尝试将 Link 组件（来自 react-router）与我的自定义按钮组件一起使用。 我不确定我做错了什么：

<Button component={Link} to="/">
"This works"
</Button>

<CustomButton component={Link} to="/">
"And this doesn't"
</CustomButton>

CustomButton 是一个简单的 withStyles - 组件：

const CustomButton = withStyles((theme: Theme) => ({
    root: {
        marginLeft: '0.5rem'
        /* ...etc ... */
    },
}))((props: ButtonProps) => <Button color="default" {...props} variant="contained" />);

export default CustomButton;

我收到类型错误：

“IntrinsicAttributes & Pick”、“button”>、“children”类型上不存在属性“component” | "参考" | “表格” | “插槽” | ...

沙盒：https://codesandbox.io/s/fervent-borg-bqize

它本身确实有效，但是来自 linter 的类型错误不允许我编译它（不抑制 linter）

Answer 1

试试

const CustomButton = withStyles({
  root: {
    marginLeft: '0.5rem'
  }
})(Button);