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

Posted 2023-02-22

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

【英文标题】：Material-UI formControlLabel whole label is clickable only text should be

【发布时间】：2020-07-18 09:58:38

【问题描述】：

我是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.

如何添加？

谢谢。

【问题讨论】：

如果您能提供一个code sandbox 来重现您在可点击文本后有空白区域的问题，那将会很有帮助。我怀疑这可能与您的 css.formControl 类中的 CSS 有关（可能设置了显式宽度？）。

【参考方案1】：

您可以阻止父元素发生点击事件，也可以允许子元素这样做。

使用pointer-events 禁用点击事件。

pointer-events: none;

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