旋转/变换材质-UI列表

Question

我正在尝试使用React Material-UI和Drawer API来构建一个导航侧栏，其中旋转的按钮（将按钮旋转90度的堆叠列表）。我只有几个想使用的按钮，因此我尝试使用永久性的Drawer设置来实现。我想知道是否有人对此有任何示例或解决方案。目前，我在CSS文件中有此文件：

.horiz-list {
    display: inline-block;
    transform: rotate(270deg);
    height: 80px;
    width: 50px;
}

这是我的侧边栏代码中的示例：

const button = {
      text: "Photos",
      onClick: () => history.push('/photos')
    };

<Drawer
          className={classes.drawer}
          variant="permanent"
          classes={{
              paper: classes.drawerPaper,
          }}
        >
            <Toolbar />
            <div className={classes.drawerContainer}>
              <Divider />
              <List>
                <ListItem button key={button.text} onClick={button.onClick}>
                  <ListItemText primary={button.text} className="horiz-list" />
                </ListItem>
              </List>
              <Divider />
            </div>
</Drawer>

现在，某些标签最终不在屏幕上，并且滑块位于底部。预先感谢！