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
}));