reactjs - MUI v5 + 样式化() + ListItemButton : property 'to' /'component' does not exist

Question

在从 MUI v4 到 v5 的迁移过程中，我遇到了这个障碍:在 v4 中我使用了 makeStyles()，但现在想完全迁移到 styled():我无法让 Typescript 接受具有 to= 和 component= 属性的 styled(ListItemButton)(...) .

我在 Wrapping components 上看到并阅读了 MUI 指南这实际上让我更不清楚；诚然，我既不是 Typescript 也不是 MUI 向导。该指南的示例不完整加剧了我的困惑，例如明显缺少一些不明显的导入，这些导入似乎需要导入符号重命名，因此自动完成将不起作用或出现多个候选对象。

这是一个触发 Typescript 错误的最小化示例，请参阅下面的 codesandbox 链接。

import React from "react"
import {
  Avatar,
  Link,
  ListItemAvatar,
  ListItemButton,
  styled
} from "@mui/material"

const ListItemButtonLink = styled(ListItemButton)(({ theme }) => ({
  // ...here be styling
}))

interface LinkedListItemProps {
  path: string
}

export const LinkedListItem = ({ path }: LinkedListItemProps) => {
  return (
    <ListItemButtonLink key={42} dense to={path} component={Link}>
      <ListItemAvatar>
        <Avatar>A</Avatar>
      </ListItemAvatar>
      Here Be Item
    </ListItemButtonLink>
  )
}

我完全不知道如何让它工作，因为 Guide 示例也没有通过 Typescript 检查。

通过查看 MUI 问题，我发现了一个解决指南问题的问题，但似乎并没有以我可以使用的方式修复它。

我也看过并读过 MUI button with styled-components including react router Link , 但解决方案基本上是一种非 Typescript 指南版本。

(更新)

Answer 1

您正在使用 Link来自 MUI 包，此 Link 只是一个 anchor 元素，但与 MUI 主题的样式集成更好，您可能想使用的 Link 来自 react-router，它具有到 prop，所以将代码更改为:

import { Link } from "react-router-dom";

如果您使用 styled 并希望结果组件具有来自 react-router 的 to 属性，您可以将泛型类型参数添加到 HOC:

import { Link, LinkProps } from "react-router-dom";

const ListItemButtonLink = styled(ListItemButton)<LinkProps>(({ theme }) => ({
  // ...here be styling
}));