材质用户界面：如何使TextField和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]',
  },
}));

Answer 2

<Grid container alignItems="center" className={classes.root}>也应该起作用。