React Material UI Grid Item - 如何使列表组件占据网格容器的全宽答案

【问题标题】：React Material UI Grid Item - how to make List component take fullwidth of Grid containerReact Material UI Grid Item - 如何使列表组件占据网格容器的全宽
【发布时间】：2022-01-12 17:12:52
【问题描述】：

我在一个带有xs={12} 的网格项中有一个列表，但我不知道如何让 ListItems 分布在列表 div 的整个宽度上。列表的secondaryAction按钮出现在div的末尾，但所有的ListItem都密密麻麻地挤在了左侧。

<Grid item xs={12}>
  <List sx={{ width: '100%' }}>
    {theList.map((item, id) => (
      <ListItem key={id} secondaryAction={<Button>Open</Button>}>
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <Typography>{item.name}</Typography>
            <Typography>{item.address}</Typography>
            <Typography>{item.phone}</Typography>
          </AccordionSummary>
        </Accordion>
      </ListItem>
    ))}
  </List>
</Grid>

【问题讨论】：

请澄清您的具体问题或提供更多详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： reactjs material-ui

【解决方案1】：

网格项是否在网格容器内？容器有宽度吗？我无法重现您的问题。这是一个codesandbox，其中有一个 ListItems 占据全角的工作示例

【讨论】：