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

【问题标题】：How to vertical align material ui Checkbox如何垂直对齐材质ui复选框
【发布时间】：2020-03-27 08:45:46
【问题描述】：

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

【问题讨论】：

这能回答你的问题吗？ Material UI checkbox - text alignment

【解决方案1】：

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

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

【讨论】：

不是一个很好的解决方案，因为它过度污染了 DOM 并且使用了遗留的 CSS。

【解决方案2】：

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

这对我有用：

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

【讨论】：

【解决方案3】：

由于 MUI 基于 Flexbox，您可以简单地覆盖其 alignItems 属性：

<FormControlLabel
control={
    <div style={{ alignSelf: 'start' }}>
      <Checkbox checked={isChecked()} onChange={check.toggle} />
    </div>
}
label="Toggle Checkbox"
/>

您可以通过覆盖复选框组件样式使其更精简。

【讨论】：