reactjs - Material 用户界面 : how to center vertically TextField and ButtonGroup

Question

我是 Material UI 新手，在垂直对齐 TextField 组件和 ButtonGroup 组件时遇到一些问题。

我尝试使用 Grid/Grid 项目，但没有成功。任何帮助将不胜感激。

在这里您可以看到它的样子:

样式:

const useStyles = makeStyles(() => ({
    root: {
      marginTop: '5px',
    },
    menuButton: {
      color: grey[800],
    },
  }));

渲染:

    return (
        <div>
            <Grid container className={classes.root}>
                <Grid item xs={3}>
                    <TextField
                        placeholder='Lesson title'
                        label='Title'
                        value={values.title}
                        onChange={handleChange('title')}
                        margin='normal'
                    />
                </Grid>
                <Grid item xs={3}>
                    <ButtonGroup variant='contained' aria-label='small contained button group'>
                        <Button><FontAwesomeIcon icon={faFile} className={classes.menuButton} /></Button>
                        <Button><FontAwesomeIcon icon={faFolderOpen} className={classes.menuButton} /></Button>
                        <Button><FontAwesomeIcon icon={faSave} className={classes.menuButton} /></Button>
                        <Button><FontAwesomeIcon icon={faTrashAlt} className={classes.menuButton} /></Button>
                    </ButtonGroup>
                </Grid>
            </Grid>

        </div>
    )
}

Answer 1

在网格容器根类上使用align-items属性:

const useStyles = makeStyles(() => ({
  root: {
    marginTop: '5px',
    alignItems: 'center',
  },
  menuButton: {
    color: 'grey[800]',
  },
}));