材质UI复选框-文本对齐

Question

我正在使用Material UI 4.8.3，并具有以下内容：

const CustomizedCheckbox = withStyles({
  root: {
    color: '#0f236e',
    '&$checked': {
      color: '#0f236e',
    },
  },
  checked: {},
})((props) => <Checkbox color="default" {...props} />);


<Grid
        item
        xs={12}
        sm={12}
        md={12}
        lg={12}
        className="disclaimerAndNotes"
      >
        <FormControl fullWidth>
          <FormControlLabel
            control={<CustomizedCheckbox />}
            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>
      </Grid>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

该复选框的外观如下：

我想要实现的是，该复选框与文本的开头对齐。

如何实现？

Answer 1

您可以使用CSS实现这一目标

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

使用<CustomizedCheckbox>道具在display:table-cell周围添加包装纸，并将display:table添加到您的<FormControlLabel>

Here，您有一个有效的密码箱