reactjs - 在 Semantic-UI-React Modal 中显示 VisX 图会导致 z-index 出现问题

Question

我在 Semantic-UI-React Modal 中添加了一个 VisX 图。

该图本身正确显示了工具提示、十字准线和系列字形：

但是当它处于模态时，所有这些都出现在模态下方：

我可以在我为renderTooltip属性提供的组件中使用更高的 z-index 重建工具提示，但它缺少十字准线和系列字形：

由于这些元素是在悬停时添加到 DOM 中的，因此我无法在devtools 中捕获它们并查看它们具有和继承的样式。
有什么方法可以设置他们的 z-index 或以其他方式解决这个问题吗？

    const Visx: FC = () => {
      return (
        <Modal open>
          <Modal.Content>
            <XYChart width={900} height={500} xScale={{ type: 'time' }} yScale={{ type: 'linear' }}>
              <Grid rows numTicks={maxCount + 1} />
              <Axis
                orientation="left"
                label="Play count"
                numTicks={maxCount + 1}
                tickFormat={(value) => {
                  return value;
                }}
              />
              <Axis orientation="bottom" label="Date" />
              <LineSeries dataKey="plays" data={data} {...accessors} />
              <Tooltip
                showHorizontalCrosshair
                showVerticalCrosshair
                snapTooltipToDatumX
                snapTooltipToDatumY
                showSeriesGlyphs
                showDatumGlyph
                renderTooltip={({ tooltipData }) => {
                  const datum = tooltipData.nearestDatum?.datum as DataPoint | null;
                  return (
                    <div>
                      {datum?.count || 'no'} plays on {moment(datum?.date).format('MMM D, YYYY')}
                    </div>
                  );
                }}
              />
            </XYChart>
          </Modal.Content>
        </Modal>
      );
    };

标签： reactjsd3.jsz-indexsemantic-ui-react

Answer 1

通过添加这个全局 CSS 样式来修复它：

.visx-tooltip {
  z-index: 9999; /* or whatever height is appropriate */
}