React Material UI ListItems 垂直对齐

Question

我正在尝试以垂直对齐模式在 Material UI mini Drawer 上填充 ListItems（ListItemIcon 和 ListItemText）。一些我的 ListItemText 未正确对齐 ListItemIcons 的方式。

这是我的风格：

  link: {
    textDecoration: "none",
    "&:hover, &:focus": {
      backgroundColor: theme.palette.background.yellow
    }
  },
  linkActive: {
    backgroundColor: theme.palette.background.light
  },
  linkIcon: {
    marginRight: theme.spacing(1),
    marginBottom: theme.spacing(4),
    color: theme.palette.text.secondary + "99",
    transition: theme.transitions.create("color"),
    width: 24,
    display: "flex",
    justifyContent: "center"
  },
  linkText: {
    marginTop: theme.spacing(1),
    color: theme.palette.text.secondary + "CC",
    transition: theme.transitions.create(["opacity", "color"]),
    fontSize: 13,
    display: "flex",
    justifyContent: "flex-end"
  }

组件

import React from "react";
import {
  ListItem,
  ListItemIcon,
  ListItemText,
} from "@material-ui/core";
import { Link } from "react-router-dom";
import classnames from "classnames";

// styles
import useStyles from "./styles";

export default function SidebarLink({
  link,
  icon,
  label,
  location,
}) {
  var classes = useStyles();
  var isLinkActive =
    link &&
    (location.pathname === link || location.pathname.indexOf(link) !== -1);

  return (
    <ListItem
      button
      component={link && Link}
      to={link}
      className={classes.link}
    >
      <ListItemIcon
        className={classnames(classes.linkIcon, {
          [classes.linkIconActive]: isLinkActive
        })}
      >
        {icon}
      </ListItemIcon>

      <ListItemText
        classes={{
          primary: classnames(classes.linkText, {
            [classes.linkIconActive]: isLinkActive
          })
        }}
        primary={label}
      ></ListItemText>
    </ListItem>
  );
}

如何在垂直模式下正确对齐 ListItems？我尝试将 textAlign 和 alignItems 添加到 linkText css 类的中心，但它们不起作用。

感谢任何帮助

谢谢，

Answer 1

react-router-dom 链接在底层使用 html 标签。
子项将默认显示在列中。
您只需要正确设置链接样式：

  link: {
    display: 'flex',
    flexDirection: 'row',
    textDecoration: "none",
    "&:hover, &:focus": {
      backgroundColor: theme.palette.background.yellow
    }
  },