reactjs：材料ui：如何将两个项目对齐到两端

Question

我在 reactjs 中使用 Material ui 主题有以下代码

const useStyles = makeStyles((theme) => ({
  root2: {
    maxWidth: 345,
    flexGrow: 1
  },
  paper2: {
    padding: theme.spacing(1),
    color: theme.palette.text.secondary,
  }
})

<div className={classes.root2}>
  <Grid container spacing={3}>
    <Grid item xs={12}>
      <Paper className={classes.paper2}>
       <Grid container alignItems="center" spacing={3}>
          <Grid item>
            <h3>Instructions</h3>
          </Grid>
          <Grid item>
            <IconButton>
              <ExpandMoreIcon />
            </IconButton>
          </Grid>
        </Grid>
      </Paper>
    </Grid>
  </Grid>
</div>

我想要的是

我在https://material-ui.com/system/flexbox/#flex-grow看到了一个例子

使用代码：

import React from 'react';
import Box from '@material-ui/core/Box';

export default function FlexGrow() {
  return (
    <div style={{ width: '100%' }}>
      <Box display="flex" p={1} bgcolor="background.paper">
        <Box p={1} flexGrow={1} bgcolor="grey.300">
          Item 1
        </Box>
        <Box p={1} bgcolor="grey.300">
          Item 2
        </Box>
        <Box p={1} bgcolor="grey.300">
          Item 3
        </Box>
      </Box>
    </div>
  );
}

我是材料 ui 的新手。这里的示例使用 Box 而不是 Grid。

那么处理这个问题的最佳方法是什么

我习惯于 bootstrap 4：在 bootstrap4 中我可以使用

https://getbootstrap.com/docs/4.4/utilities/flex/#justify-content

<div class="d-flex justify-content-between">...</div>

如何在 Material UI 中做这样的事情

Answer 1

将justify="space-between" 添加到Grid 容器组件将解决您的问题。

请参考this。

  <Grid container spacing={3}>
    <Grid item xs={12}>
      <Paper className={classes.paper2}>
       <Grid container alignItems="center" justify="space-between">
          <Grid item>
            <h3>Instructions</h3>
          </Grid>
          <Grid item>
            <IconButton>
              <ExpandMoreIcon />
            </IconButton>
          </Grid>
        </Grid>
      </Paper>
    </Grid>
  </Grid>