Material-UI formControlLabel 整个标签是可点击的，只有文本应该是

Question

我是新来的material UI。这里我有以下内容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>

现在，整个标签变得可单击，因为该区域有点长，所以，我正在尝试的是唯一的复选框和文本应该可单击，而其他空白区域不应单击。在这里，我已经给出了

max-width for that label to be 272px.

我该如何添加呢？

谢谢。

Answer 1

您可以阻止父元素单击事件，也可以允许子元素执行此操作。

使用指针事件禁用单击事件。

pointer-events: none;

pointer-events: none;