Question

我试图在垂直对齐方式下在Material UI迷你抽屉上填充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 标记。
子项将默认显示在列中。
您只需要正确设置链接的样式即可：

res <- Map(runif2, list(I1, I2, I3), n = 500)
res <- data.table::rbindlist(res, idcol = "id")

head(res)
#   id       X1         X2
#1:  1 1.113703 0.66891915
#2:  1 1.622299 0.80104330
#3:  1 1.609275 0.85545589
#4:  1 1.623379 0.05013991
#5:  1 1.860915 0.67443409
#6:  1 1.640311 0.84589330

React Material UI ListItems垂直对齐

1 个答案: