css - 如何使用 Material-UI Grid 组件正确实现此布局

Question

我正在尝试使用 Grid 组件在 Material-UI 中实现此布局。

我用红色突出显示了容器边界，以使边界在哪里更清楚。

• 添加按钮应该在容器的右端
• 芯片应在左侧对齐并在水平方向上占用尽可能多的空间

• 筹码堆叠时，添加按钮应与容器底部垂直对齐

我已经设法使用嵌套网格来实现这一点，如下例所示：

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 container wrap="nowrap" spacing={2}>
        <Grid item xs>
          <Grid container spacing={1}>
            {renderChips()}
          </Grid>
        </Grid>
        <Grid item display="flex" component={Box}>
          <Grid container alignItems="flex-end">
            <Grid item>
              <Button variant="contained" color="primary" onClick={addChip}>
                Add
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  )
}

我想避免不必要地嵌套 Grid 组件。更具体地说，我想使用<Grid item container>a 而不是<Grid container>包含 a <Grid item>，但使用这种方法我无法实现这种布局，即扩展左侧的芯片部分并将按钮保持在右侧，同时保持它与底部垂直对齐。

标签： csslayoutmaterial-ui

Answer 1

尝试使用以下块

<Box border="1px solid red" style={{'postion':'relative'}}>
      <Grid container spacing={2} style={{'padding': '1px 80px 1px 1px'}}>
            {renderChips()}
      </Grid>
      <Button variant="contained" color="primary" onClick={addChip} style={{'position':'relative', 'float': 'right', 'bottom': '35px'}}>
                Add
      </Button>    
</Box>

代替

<Box border="1px solid red">
      <Grid container wrap="nowrap" spacing={2}>
        <Grid item xs>
          <Grid container spacing={1}>
            {renderChips()}
          </Grid>
        </Grid>
        <Grid item display="flex" component={Box}>
          <Grid container alignItems="flex-end">
            <Grid item>
              <Button variant="contained" color="primary" onClick={addChip}>
                Add
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>