在 Next.js 中使用 Antd 开窗会破坏工具提示和弹出窗口

Question

我正在 Next.js 中使用 Antd 试验窗口技术，我制作了这个简单的应用程序，其中包含 index.tsx 页面：

import { CSSProperties } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List } from 'react-window'
import { Card, Tooltip } from 'antd'

import data from '../data'

import styles from '../styles/Home.module.css'


const people = data();

const Row = ({ index, style }: { index: number, style?: CSSProperties }) => (
  <div style={style}>
    <Card bordered={true}>
      <p>{people[index].name}</p>
      <Tooltip title={`${Math.floor(people[index].age/15)} in dog years`}>
        <p>{people[index].age}</p>
      </Tooltip>
    </Card>
  </div>
)

const Home: NextPage = () => {
  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          itemCount={people.length}
          itemSize={100}
          width={width}
        >
          {Row}
        </List>
      )}
    </AutoSizer>
  )
}

export default Home

在 globals.css 中添加以下样式之前，FixedSizeList 将不起作用：

html, body, div {
  height: 100%;
}

但是，当我这样做时，它破坏了 Antd 的 Tooltip。通常发生的情况是，当我将鼠标悬停在相关元素上方时，工具提示会以 100% 的高度出现一瞬间，然后消失，并且无论我将鼠标悬停在哪里，它都不会再出现在页面上。

我该如何解决这个问题？

Answer 1

千辛万苦终于找到了解决办法

显然，Nextjs 用一个 div 和 id __next 包裹了整个布局。那是整个页面的 outer-most 容器，它的高度没有设置，所以由于 FixedSizeList 的内容被放置在常规页面流之外，所以 __next div 的高度为 0。

不知道有没有更好的解决办法，我干脆在globals.css文件里加了这个小样式：

div#__next {
  height: 100%;
}

这解决了问题，没有强制页面中的其他 div 高度为 100%（包括工具提示和弹出窗口）。

在 Next.js 中使用 Antd 开窗会破坏工具提示和弹出窗口

Windowing with Antd in Next.js breaks tooltips and popovers

next.js

antd

react-window