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

IT技术 javascript html reactjs material-ui react-material
2021-05-20 20:10:47

我是新来的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.

我该如何添加?

谢谢。

1个回答

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

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

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

在此处输入图片说明