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

如何使材质ui中的列表导航做出反应

1 个答案: