Material-UI formControlLabel whole label is clickable only text should be

问题

I am new to the material UI. here I have the following form

<FormControl
  variant="outlined"
  className={css.formControl}
  margin="dense"
  key={"abc_" + index}
>
  <FormControlLabel
    control={
      <Checkbox
        onClick={handleClick(data)}
        checked={_.some(selected, { Id: selected.Id })}
        value={selected.Id}
        color="default"
      />
    }
    label={data?.Name ?? "NO_LABEL"}
  />
</FormControl>

Now, this whole label gets clickable as the area is a bit long, so, what I am trying is the only the checkbox and the text should be clickable and the other empty space should not be clicked. Here , I have given the

max-width for that label to be 272px.

How do I add that?

Thanks.

回答1:

You can prevent parent elements from click events, as well as allow the child to do it.

Use pointer-events to disable click event.

pointer-events: none;

<FormControlLabel
  style={{ pointerEvents: "none" }}
  control={
    <Checkbox
      onClick={handleClick}
      style={{ pointerEvents: "auto" }}
      color="default"
    />
  }
  label={"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}
/>

来源：https://stackoverflow.com/questions/61059198/material-ui-formcontrollabel-whole-label-is-clickable-only-text-should-be