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

使用display:table-cell屬性在<CustomizedCheckbox>周圍添加一個包裝器，並將display:table添加到您的<FormControlLabel>

在這里你有一個有效的代碼和盒子