如何用Material-UI Grid组件实现指定布局并减少嵌套层级？

我完全理解你想减少Grid嵌套层级的需求，同时还要保留核心布局效果：左侧Chips占满可用水平空间、自动换行，右侧Add按钮始终垂直对齐容器底部。其实只需要调整外层Grid的配置，结合item container的组合写法就能轻松实现，不用多余的嵌套层级。

优化后的代码 #

import React, { useState } from 'react'
import { Button, Grid, Chip, Box } from '@material-ui/core'

export default function App() {
  const [chips, setChips] = useState(1)
  const addChip = () => setChips(c => c + 1)
  const removeChip = i => setChips(c => c - 1)

  const renderChips = () => Array(chips)
    .fill(null)
    .map((_, i) => (
      <Grid item key={i}>
        <Chip label={`Chip ${i}`} onDelete={() => removeChip(i)} />
      </Grid>
    ))

  return (
    <Box border="1px solid red">
      {/* 外层Grid设置alignItems="flex-end"，让所有子项默认底部对齐 */}
      <Grid container spacing={2} alignItems="flex-end">
        {/* 左侧Chips区域：同时作为外层的item（占满xs宽度）和内部Chips的container */}
        <Grid item container xs spacing={1}>
          {renderChips()}
        </Grid>
        {/* 右侧按钮：直接作为外层Grid的item，借助外层alignItems实现底部对齐 */}
        <Grid item>
          <Button variant="contained" color="primary" onClick={addChip}>
            Add
          </Button>
        </Grid>
      </Grid>
    </Box>
  )
}

关键调整说明 #

• 外层Grid核心配置：给最外层Grid container加上alignItems="flex-end"，这样所有直接子项都会自动垂直对齐容器底部，不用再给按钮单独嵌套Grid来控制对齐。
• 简化Chips区域嵌套：用Grid item container xs替代原来的“Grid item + 内部Grid container”结构，这个写法让它同时具备两个身份：作为外层Grid的子项占满剩余水平空间（xs属性），同时作为内部Chips的容器，完美减少了一层嵌套。
• 按钮区域简化：按钮直接放在Grid item里即可，不需要额外的嵌套容器，外层的alignItems="flex-end"已经帮我们搞定了垂直对齐。

这样调整后，既保留了你想要的所有布局效果——Chips自动换行、占满水平空间，按钮始终在右侧底部，同时大幅减少了Grid的嵌套层级，代码更简洁易读。

内容的提问来源于stack exchange，提问作者Simone