如何垂直对齐材质 ui 复选框

Question

简单地说，我想垂直对齐Material UI中的复选框。

Answer 1

尝试更改 FormControlLabel 的alignItems 样式属性。

这对我有用：

<FormControlLabel
    sx={{ alignItems: 'flex-start' }}
    control={
        <Checkbox
            sx={{
                marginTop: -1,
            }}
        />
    }
/>

Answer 2

这花了我一段时间才找到，但另一个论坛的解决方案是有效的：

<FormControl fullWidth>
  <FormControlLabel
    style={{display:'table'}}
    control={<div style={{display:'table-cell'}}><CustomizedCheckbox/></div>}
    label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>}
  />
</FormControl>