将 Material UI 菜单呈现为 <nav>，将其子元素呈现为 <a>？

Question

我有一个使用Material UI的Menu，默认情况下呈现为<div> > <ul> <li>。我想把它变成一个<div> <nav> <a>。

我能够更改MenuItem并将其转换为<a>，但我找不到将<ul>转换为<nav>的方法，因为没有component属性。 Material UI非常可定制化，我肯定是错过了什么，这是我的错误。

<Menu open={true}>
  <MenuItem component='a'>Profile</MenuItem>
  <MenuItem component='a'>Settings</MenuItem>
  <MenuItem component='a'>Logout</MenuItem>
</Menu>

我还可以将MenuList API作为Menu的子级使用，但它只会在<ul>下方再渲染一级别。

- gremo

Answer 1

MenuList 继承了 props 自 List 组件，您可以使用这些 props 将 ul 更改为 nav

<Menu
  open={true}
  MenuListProps={{
    "aria-labelledby": "basic-button",
    component: "nav"
  }}
>

- RubenSmn

---

谢谢，它可以工作了，但我仍然得到错误提示：类型 '{ component: string; 'aria-labelledby': string; }' 无法分配给类型 'Partial<MenuListProps>'。有什么想法吗？ - gremo

不好意思，似乎在类型“Object literal may only specify known properties, and 'component' does not exist in type 'Partial<MenuListProps<"ul", {}>>'”中ul是硬编码的。 - RubenSmn