材质 UI 对齐复选框

Question

我将如何将我的复选框垂直对齐到日历元素。由于填充，它总是在它应该位于的右侧。或者邀请不一致。

<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 邀请函、文档在 中的容器

Answer 1

你应该使用弹性框：

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

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