我在 Semantic-UI-React Modal 中添加了一个 VisX 图。
图表本身正确显示了工具提示、十字准线和系列字形:
但是当它处于模态时,所有这些都出现在模态下方:
我可以在为 renderTooltip
属性提供的组件中使用更高的 z-index 重建工具提示,但它缺少十字准线和系列字形:
由于这些元素是在悬停时添加到 DOM 中的,所以我不可能在开发工具中捕获它们并查看它们具有和继承的样式。
有什么方法可以设置他们的 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>
);
};
答案 0 :(得分:0)
通过添加此全局 CSS 样式来修复它:
.visx-tooltip {
z-index: 9999; /* or whatever height is appropriate */
}