材质 UI 对齐复选框答案

【问题标题】：Material UI Aligning Checkbox材质 UI 对齐复选框
【发布时间】：2021-05-29 19:19:37
【问题描述】：

我将如何将我的复选框与日历元素垂直对齐。由于填充，它总是在它应该在的右边。或者邀请未对齐。

<Grid item xs={12} >
  <Typography noWrap className={classes.accordionCheckMarkFor} >
    Calender
  </Typography>
  <AccordionActions>
    <Box> 
      <Checkbox />
      <Checkbox />
      <Checkbox >
    </Box>
  </AccordionActions>
</Grid>

我尝试了某些事情

accordionCheckMarkFor:{
    fontSize:"110%",
    fontWeight: 500,
    float:'left'
},
alignCheckboxes:{
    marginTop:'0px',
    paddingTop:'0px',
}

除了尝试margintop：auto容器邀请，文件在

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你应该使用弹性盒子：

.MuiGrid-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

您可以在这里查看： https://stackblitz.com/edit/react-2chfxt?file=src%2Fstyle.css

【讨论】：

如何让前 3 个项目保持在左侧，然后接下来的两个项目向右移动。
首先，我在答案中提供的样式应该适用于网格，而不是排版。对于您的问题，请添加此类容器 {display: flex; } 到 2 列的父级，并给它们 50% 的宽度。