Material UI：如何垂直居中 TextField 和 ButtonGroup答案

【问题标题】：Material UI: how to center vertically TextField and ButtonGroupMaterial UI：如何垂直居中 TextField 和 ButtonGroup
【发布时间】：2019-12-29 10:55:53
【问题描述】：

我是 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>
    )
}

【问题讨论】：

没有 jsfiddle（或类似的），很难诊断。如果我猜的话，我会说这些组件的顶部是对齐的。 TextField 可能内置了一些空间，以便标签在焦点上向上移动。

标签： reactjs forms grid material-ui

【解决方案1】：

<Grid container alignItems="center" className={classes.root}> 也应该可以工作。

【讨论】：

【解决方案2】：

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

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

【讨论】：