Material 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>在with道具周围添加一个包装display:table-cell并添加display:table到您的<FormControlLabel>

这里你有一个工作的codesandbox