使用网格调整 Material UI 中的 Div 高度答案

【问题标题】：Adjusting the Div heights in Material UI using grid使用网格调整 Material UI 中的 Div 高度
【发布时间】：2021-06-09 19:54:36
【问题描述】：

对于我的项目，我的任务是使用 material-ui。有没有办法减少包含“登录方式”文本的 div 的宽度高度，如图所示，使按钮更靠近文本？

从这里：

到这里：

代码：

<div className={classes.root}>
  <Grid
    container
    direction="row"
    spacing={0}
  >
    
      <React.Fragment>
          
        <Grid item xs={6} container direction="row">
            <Grid item xs={12}>
              <h1>Sign In With</h1>
            </Grid>
            <Grid item xs={12} container>
              <Grid item xs={3}>
              
                <Button
                  className={classes.buttonGoogle}
                  onClick={() => {
                    if (props.onSelectGoogle !== undefined)
                      props.onSelectGoogle('google');
                    }}
                >
                  Google
                </Button>
              
              </Grid>
              <Grid item xs={3}>
                <Button
                  className={classes.buttonLinkedIn}
                  onClick={() => {
                  if (props.onSelectLinkedIn !== undefined)
                    props.onSelectLinkedIn('linkedin');
                  }}
                >
                  LinkedIn
                </Button>
              </Grid>
            </Grid>
        </Grid>
            <Grid item xs={6}>
              <div className={classes.LoginImage}></div>
            </Grid>
      </React.Fragment>
    
    
    
  </Grid>
</div>

【问题讨论】：

标签： javascript css reactjs material-ui styled-components

【解决方案1】：

第一层网格就足够了，里面的只是复杂的东西。我删除了内部网格（包含标题和按钮的网格）。

你可以给title和buttonsContainer添加一些样式

<div className={classes.root}>
  <Grid container direction="row" spacing={0} >
    <Grid item xs={6} >
        <h1 className={classes.title} >Sign In With</h1>
        <div className={classes.buttonsContainer} >
        <Button
          className={classes.buttonGoogle}
          onClick={() => {
                if (props.onSelectGoogle !== undefined)
                    props.onSelectGoogle('google');
          }}
        >Google</Button>
        <Button
          className={classes.buttonLinkedIn}
          onClick={() => {
                if (props.onSelectLinkedIn !== undefined)
                props.onSelectLinkedIn('linkedin');
          }}
        >LinkedIn</Button>
        </div>
    </Grid>
    <Grid item xs={6}>
        <div className={classes.LoginImage}></div>
    </Grid>
  </Grid>
</div>

【讨论】：