React Portal 不使用工具提示组件

Question

我正在尝试将react-portal 与我的工具提示组件一起使用。没有错误，但它似乎不起作用：

1. 工具提示仍被其父容器部分隐藏，overflow:hidden
2. 我没有看到它添加到 #root 之外的新 div 中。

import { Portal } from 'react-portal';

return (
    <>
      <Wrapper
        onMouseEnter={showTip}
        onMouseLeave={hideTip}
        ref={triggerRef}
      >
        {children}
      </Wrapper>

      {render && (
        <Portal node={triggerRef.current}>
          <Content
            placement={placement}
            fade={active}
          >
            {content}
          </Content>
        </Portal>
      )}
    </>
  );

这里是Codesandbox 的完整代码。

Answer 1

我觉得react portal没什么问题，问题是你的风格，我对你的portal.js文件做了一点改动：

  if (typeof window === "object") {
    if (target) {
      root = document.getElementById("root");
    }
    el = document.createElement("div");
    el.setAttribute('style', 'position:relative'); // this line
    el.id = "portal-root";
  } 

因为您的工具提示显示在您的文本上，并且 onMouseLeave 立即调用并且工具提示再次隐藏 所以在样式化的组件中以及在我更改底部样式时的上例中：

  ${({ placement }) =>
    placement === "top" &&
    css`
      bottom: calc(100% + 50px); // this line
      &::before {
        top: calc(100% - 10px);
      }
    `}

及其作品：