将 Button 和 IconButton 组件放在同一行

Question

所以，我想在同一行中显示一个 Button 和一个 IconButton，它们位于带有属性 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>

我希望我留下了正确数量的代码，如果您需要更多，请询问，已经谢谢了！

Answer 1

将 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>

这是工作演示：

将 Button 和 IconButton 组件放在同一行

Put Button and IconButton components in the same row

reactjs

button

material-ui

grid

iconbutton