带样式的材质-用户界面按钮-包括Reaction路由器链接的组件 [英] material-ui button with styled-components including react router Link

问题描述

我正在使用带有打字脚本和样式组件的Reaction。我也在使用Material-UI库。我已经创建了样式素材-UI按钮，如下所示：

import React from 'react'
import styled from 'styled-components'
import {Button, ButtonProps} from "@material-ui/core";
type StyledButtonProps = ButtonProps & { $color?: string, component?: JSX.Element, to?: string }

export const CancelButton = styled(Button)`
  background-color: ${(props: StyledButtonProps) => props.$color ? props.$color : "blue"};
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 7px 14px;
  margin: 10px 10px 10px;

  &:hover {
    background-color: #5e5d5d;
  }

  & .MuiButton-label {
    color: #070303;
  }
` as React.ComponentType<StyledButtonProps>

export const DeleteButton = styled(CancelButton)`
  &:hover {
    background-color: #6c1919;
  }

  & .MuiButton-label {
    color: #070303;
  }
`;

我正在尝试将这些带样式的按钮用作链接。在物料-界面中提到：https://material-ui.com/components/buttons/

例如，我们可以这样做：

<Button component={Link} disabled>
   disabled
 </Button>

问题是当我尝试对如下所示的样式按钮执行相同的操作时：

为什么？我怎么才能解决它呢？我尝试添加其他道具：

component?: JSX.Element, to?: string   

但这并没有帮助。使用或不使用它们的结果是相同的。

最小可复制代码：https://codesandbox.io/s/bold-pond-jqrht

推荐答案

如果你关注我的评论，你就会找到答案。您需要转发引用。

const CustomLink = forwardRef(({to,...props}, ref) => {
    return <Link to={to} ref={ref} {...props} />
})

<CancelButton $color="grey" component={CustomLink} to="/about">
          test
</CancelButton>

沙盒：https://codesandbox.io/s/bold-pond-jqrht?file=/src/App.tsx

引用：https://material-ui.com/guides/composition/#link

这篇关于带样式的材质-用户界面按钮-包括Reaction路由器链接的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！