MUI 样式的组件和 TypeScript答案

【问题标题】：MUI styled component and TypeScriptMUI 样式的组件和 TypeScript
【发布时间】：2022-07-19 19:58:00
【问题描述】：

我有以下代码

import {Button,ButtonProps} from '@mui/material';
import { alpha, styled } from '@mui/material/styles';
import { Link as RouterLink } from 'react-router-dom';

const BackButton = styled(Button)<ButtonProps>(({ theme }) => ({
  borderColor: alpha(theme.palette.text.primary, 0.5),
  padding: theme.spacing(1),
}));

和

  const backButton = (
    <BackButton
      to={'/my/path'}
      component={RouterLink}
      fullWidth
      variant="outlined"
      color="inherit"
    >
      Back
    </BackButton>
  );

to 道具出现打字稿错误，我该如何解决？

TS2322: Type '{ children: string; to: string; component: typeof Link; fullWidth: true; variant: "outlined"; color: "inherit"; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses>; color?: "inherit" | "error" | "primary" | "secondary" | "success" | "info" | "warning"; ... 9 more ...; variant?: "text" | ... 1 more ... | "contained"; } & ... 4 more ... & { ...; }'.   Property 'to' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses>; color?: "inherit" | "error" | "primary" | "secondary" | "success" | "info" | "warning"; ... 9 more ...; variant?: "text" | ... 1 more ... | "contained"; } & ... 4 more ... & { ...; }'.

【问题讨论】：

标签： reactjs typescript material-ui styled-components

【解决方案1】：

你能在按钮上添加一个 onClick 处理程序来处理重定向吗？

【讨论】：