解决 Ant Design Modal 中的 Select 选项框不能显示的问题

2024-08-28 14:44:12

antd 的 select 在 modal 里不能显示候选框

代码示例

<a-modal>

  <a-select>

    <!-- options -->

  </a-select>

</a-modal>

问题

当点击 <select> 的时候，发现下拉选项没出现。

分析

事实上是下拉框是出现了，只是被 <a-modal> 遮挡了。

原因是因为 select 的下拉框通过 .ant-select-dropdown 样式给到的 z-index 是 1050，而 modal 自带的样式 .ant-modal-wrap 给的默认 z-index 却是 9998 ！！！

解决方案

通过查看官方文档，modal 拥有一个 zIndex 可配置属性，该属性会通过内联样式覆盖 CSS 上的属性，所以只要把这个值设置的小于 1050 就可以了。

PS：文档里写 zIndex 属性的默认值是 1000，可见开发团队考虑过遮挡问题，但使用中依然出现上述问题，所以可能是文档写错了 or 组件库的 bug or 自己用得不对

最新文章

热门文章