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

Question

我是 material UI 的新手。这里我有以下表单

<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禁用点击事件。

pointer-events: none;

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