MUI 下一个工具提示在悬停时不显示

Question

我将 Material-UIv1.0.0-beta.34 Tooltip 与 Checkbox 和 FormControlLabel 一起使用，实际上当我在一种情况下将鼠标悬停到 Checkbox 上的标签时，当我使用 FormControlLabel 创建一个新的组件（自定义）和它里面的复选框看起来工具提示没有按预期工作。

https://codesandbox.io/s/n33p76n28p

Answer 1

该Tooltip如果您缠绕将正常工作，Checkbox在div像这样：

<Tooltip title="This tooltip works great">
  <div>
    <Checkbox label="This tooltip works on both text and checkbox." />
  </div>
</Tooltip>
<Tooltip title="This tooltip does not work">
  <Checkbox label="This tooltip does not work hovering on text, only hovering on checkbox." />
</Tooltip> 

原因

该Tooltip组件的工作原理是响应其子组件（活动onMouseEnter，onMouseLeave和其他几个）。它通过将 props 应用于顶级子级来注册这些事件。

当您将Checkboxa包裹在 a 中时div，将div接收 theonMouseEnter和onMouseLeaveprops，因此悬停可以正常工作。

但是，当您没有 wrapping 时div，您的自定义Checkbox会收到onMouseOver并onMouseLeave作为其props. 你把这些props把它们分散成MuiCheckbox这样：

<FormControlLabel
  control={<MuiCheckbox {...props} />}
  label={label ? label : ""}
/>

所以，你有效地应用onMouseOver，并onMouseLeave只对MUICheckbox自身，而不是标签。因此悬停仅适用于Checkbox标签而不适用于标签。

如果你愿意，你也可以通过在整个自定义组件中传播 props 来解决这个问题：

export const Checkbox = ({ error, helperText, ...props }) => {
  // Capture all of the other props in other
  let { disabled, label, ...other } = props;
  let icon;

  if (disabled) icon = <Info color="disabled" />;
  else if (error) icon = <Warning color="error" />;

  // Spread the other props throughout the top-level div
  return (
    <div {...other}>
      <div>
        <FormControlLabel
          control={<MuiCheckbox {...props} />}
          label={label ? label : ""}
        />
        {!!helperText && (
          <FormHelperText error={error} disabled={disabled}>
            {!!icon && icon}
            {helperText}
          </FormHelperText>
        )}
      </div>
    </div>
  );
};

我最初不建议使用该解决方案，因为如果您不小心，它可能会更改组件的逻辑，而包装div应该非常安全。