一个组件道具如何与自定义组件一起使用?

时间:2020-05-14 20:49:54

标签: reactjs typescript material-ui

我试图将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;

我遇到类型错误:

属性'component'在类型'IntrinsicAttributes&Pick,“ button”>,“ children”中不存在| “ ref” | “表格” | “广告位” | ...

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

它本身就可以工作,但是lint的类型错误不允许我对其进行编译(不抑制lint)

1 个答案:

答案 0 :(得分:0)

尝试

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