reactjs - 如何将 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）

标签： reactjstypescriptmaterial-ui

Answer 1

尝试

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