reactjs - MUI v5 + styled() + ListItemButton: 属性 'to'/'component' 不存在

Question

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

我已经看过并阅读了 MUI 关于包装组件的指南，这实际上让我更不清楚；诚然，我既不是 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>
  )
}

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

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

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

（更新）

标签： reactjstypescriptreact-routermaterial-ui

Answer 1

您正在使用LinkMUI 包，这Link只是一个锚元素，但与 MUI 主题具有更好的样式集成，Link您可能想要使用来自具有to道具的 react-router，因此将您的代码更改为：

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

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

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

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