使用MUI的样式化组件api的实质性UI链接按钮

Question

我喜欢Material UI Styled Component api的外观（ 不是 styled-component library ），但是我拥有将我的简单按钮组件变成链接的按钮时遇到了麻烦。

如何在MUI样式的组件按钮中插入react-router-dom链接？

以前，典型的Material UI HOC api方法让我添加一个链接的“报告”按钮，如下所示。效果很好，但需要更多样板（此处未显示）：

<Button
  variant="contained"
  color="primary"
  className={classes.button}
  component={Link}
  to="/reports"
>
  <ShowChartIcon className={classes.buttonIcon} />
  Reports
</Button>

＃1显而易见的方法：：当我遵循此模式并将component和to属性包括在我自己的名为<MyButton>的MUI样式组件中时，打字稿错误，指出这些属性不存在。

＃2不同的方法：：按照this material ui github issue中提出的模式，按钮确实链接到报告屏幕，但是variant和color迷路了：

<MyButton
    variant="contained"
    color="primary"
    {...{
        component: Link,
        to: `/reports`
    } as any}
>
    <MyShowChartIcon />
    Reports
</MyButton>

＃3解决方法：一个不太理想的选择是将按钮包装在<Link>中。确实创建了一个有效的链接，但同时也带来了一些意外样式。

<Link to="/reports">
    <MyButton
        variant="contained"
        color="primary"
    >
        <MyShowChartIcon />
        Reports
    </MyButton>
</Link>

Answer 1

使用最新版本的material-ui（v4.0.2），您可以使用由withStyles创建的HOC组件，但是您必须手动将自定义组件转换回其原始类型：

const MyButton = withStyles(
  createStyles({
    root: {
      color: 'red'
    }
  })
)(Button) as typeof Button

然后，您可以像使用原始组件一样使用自定义组件：

<MyButton component={Link} to="/blank-page">
  my button
</MyButton>

这是一个有效的示例：https://codesandbox.io/s/createreactappwithtypescript-n6wih

我从以下评论中找到了该解决方案：https://github.com/mui-org/material-ui/issues/15695#issuecomment-498242520。