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

Question

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

https://codesandbox.io/s/n33p76n28p

Answer 1

如果将 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 应用于顶级子级来注册这些事件。

当您将 Checkbox 包裹在 div 中时，div 会接收 onMouseEnter 和 onMouseLeave Prop ，因此悬停可以正常工作。

但是，当您没有包装 div 时，您的自定义 Checkbox 会接收 onMouseOver 和 onMouseLeave作为其 props 的一部分。您将这些 props 并将它们传播到 MuiCheckbox 中，如下所示:

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

因此，您实际上仅将 onMouseOver 和 onMouseLeave 应用于 MUICheckbox 本身，而不是应用于标签。因此，悬停仅适用于复选框，而不适用于标签。

如果您愿意，您还可以通过将 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 应该非常安全。