将 Button 和 IconButton 组件放在同一行

问题描述

所以，我想在与 IconButton 的同一行中显示一个 Button，它们位于带有 prop align="center" 的 Grid 容器中，我认为这可能是导致问题的原因。我是 Material-ui 的完全初学者，我尝试了多种方法但都没有奏效，我需要帮助！

CSS：

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#app {
  width: 100%;
  height: 100%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

JSX：

<Grid container spacing={1} align="center">
   <Grid item xs={12} direction="row">
      <Button
         variant="contained"
         color="secondary"
         onClick={this.leaveButtonpressed}
      >
      Leave Room
      </Button>
   </Grid>
   <Grid item xs={12}>
      <IconButton color="primary" onClick={() => this.updateShowSettings(true)}>
         <SettingsIcon />
      </IconButton>
   </Grid>
</Grid>

我希望我留下了适量的代码，如果您需要更多，请询问，谢谢！

解决方法

要将 Button 与 IconButton 放在同一行，减少 xs 值，因为 12 是最大值，如果给它 12，它将占据整个宽度父母的。所以，给它 6 和另一个项目给 6。

<Box>
    <Grid container spacing={1} align="center" direction="row">
        <Grid item xs={6} >
            <Button
                variant="contained"
                color="secondary"
                onClick={this.leaveButtonPressed}>
                Leave Room
            </Button>
        </Grid>
        <Grid item xs={6}>
            <IconButton color="primary">
                <Settings />
            </IconButton>
        </Grid>
    </Grid>
</Box>

这是工作演示：