材质UI复选框-文本对齐 [英] Material UI checkbox - text alignment

问题描述

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

I am using Material UI 4.8.3 and have the following:

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>

该复选框的外观如下:

What the checkbox looks like:

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

What I want to achieve is, that the checkbox is aligned with the very beginning of the text.

如何实现这一目标?

推荐答案

您可以使用 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>

Add a wrapper around the <CustomizedCheckbox> with display:table-cell prop and add display:table to your <FormControlLabel>

在此您有一个有效的密码和邮箱

Here you have a working codesandbox

这篇关于材质UI复选框-文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！