MUI v5 + styled() + ListItemButton：属性“to”/“component”不存在

Question

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

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

这是触发 Typescript 错误的最小化示例，请参阅下面的代码和框链接。

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 问题，我发现一个问题解决了 Guide 问题，但似乎并没有真正以我可以使用的方式修复它。

我还看到并阅读了带有样式组件的 MUI 按钮，包括 react router Link ，但解决方案基本上是一种非 Typescript 指南版本。

（更新）

Answer 1

您使用Link从MUI包，这个Link只是一个锚元素，但与MUI主题更好的风格融合， Link您可能希望使用是具有反应路由器to支撑，所以更改您的代码：

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

如果你使用styled ，并希望得到成分有道具to从反应的路由器，可以将泛型类型参数添加到HOC：

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

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