如何将Material UI Menu渲染为<nav>，其子项改为<a>？

要把Menu默认的<div> > <ul> <li>结构改成<div> <nav> <a>，你可以通过Menu的MenuListProps属性替换内部的<ul>为<nav>，具体做法如下：

直接给Menu组件添加MenuListProps={{ component: 'nav' }}，结合你已经设置好component='a'的MenuItem，就能得到目标结构：

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

原理是：Menu组件内部默认渲染MenuList（对应原来的<ul>），虽然Menu本身没有component属性，但它支持通过MenuListProps把配置传递给内部的MenuList组件。设置component="nav"后，MenuList会渲染成<nav>标签，再配合已经改成<a>的MenuItem，最终的DOM结构就是你需要的<div> > <nav> > <a>。

内容的提问来源于stack exchange，提问作者gremo