Material UI checkbox - text alignment

问题

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.

How to achieve this ?

回答1:

You can use CSS to achieve this

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

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

Here you have a working codesandbox

来源：https://stackoverflow.com/questions/60614667/material-ui-checkbox-text-alignment

标签

javascript

css

material-ui