Material-UI ListItem“flex-start”不起作用答案

【问题标题】：Material-UI ListItem "flex-start" not workingMaterial-UI ListItem“flex-start”不起作用
【发布时间】：2021-09-02 15:41:19
【问题描述】：

我正在使用 Material-UI 列表项 (https://material-ui.com/components/lists/)

我想将列表项中的项目“左对齐”到左侧。显然，我可以使用 flex 属性“flex-start”来做到这一点，我可以像这样在 ListItem 的 alignItems 属性上设置它：

  <List>
    <ListItem alignItems="flex-start">
      <ListItemText primary={"First Element "} />
      <ListItemText primary={" Second Element"} />
    </ListItem>
  </List>

但这似乎不起作用，因为当我在浏览器中看到它们时，它们是均匀分布的。

我是不是做错了什么？

【问题讨论】：

我不相信您可以在单个 ListItem 中使用多个 ListItemText 组件。
有什么选择？
取决于您使用两个 ListItemText 的原因。您将其命名为“元素”，这意味着您将为每个元素创建一个列表项。

标签： reactjs material-ui

【解决方案1】：

试试这个...

import { makeStyles } from '@material-ui/core/styles';
    
    const useStyles = makeStyles({
      root: {
       display:'flex',
       alignItems:'flex-start',
       flexDirection: "row"
      },
    });
    
    export default function MyComponent(props) {
      const classes = useStyles(props);
      return (
    <List className={classes.root}>
        <ListItem>
          <ListItemText primary={"First Element "} />
        </ListItem>
           <ListItem>
          <ListItemText primary={"Second Element "} />
        </ListItem>
      </List>
    
    );
    }

【讨论】：

现在可以查吗？

【解决方案2】：

ListItemText 具有默认的flex: 1 1 auto; 样式。你需要改变它：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { List, ListItem, ListItemText } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiListItemText-root": {
      flex: "initial"
    }
  }
}));

export default function CustomStyles() {
  const classes = useStyles();
  return (
    <List classes={classes}>
      <ListItem alignItems="flex-start">
        <ListItemText primary={"First Element "} />
        <ListItemText primary={" Second Element"} />
      </ListItem>
    </List>
  );
}

【讨论】：