如何在材料中进行列表导航ui做出反应

Question

我想要像https://material-ui.com/getting-started/installation/一样的导航和相同的ul> li> a> sapn结构，就像他在侧面导航中制作的材料ui网站一样。我也想要同样的效果。

我使用了很多技巧，但结果却失败了。请帮忙

这是我的代码

<Router>
    <div>
        <List>
            {[0, 1, 2, 3].map(value => (
                <ListItem key={value}  className={classes.listItem}>
                    <Link button to="/about">
                        <ListItemText primary={`Line item ${value + 1}`} />
                    </Link>
                </ListItem>
            ))}
        </List>
    </div>
</Router>

Answer 1

这是我用于侧边栏的代码：

    <Drawer
      variant="permanent"
      open
       >
      <div className={classes.toolbar}>
        <IconButton onClick={this.props.handleDrawerClose}>
          {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
        </IconButton>
      </div>

      <Divider />

      <MenuList>
        {routes.map((prop, key) => {
          if (prop.redirect) return null;
          return (
            <Link to={prop.path} style={{ textDecoration: 'none' }} key={key}>
              <MenuItem selected={this.activeRoute(prop.path)}>
                <ListItemIcon>
                  <prop.icon />
                </ListItemIcon>
                <ListItemText primary={prop.sidebarName} />
              </MenuItem>
            </Link>
          );
        })}
      </MenuList>
    </Drawer>

请发现Link围绕整个ManuItem，文本装饰的风格是没有。

来自材料网站的工作示例：https://codesandbox.io/s/z6yooxokyl