解决 Ant Design Modal 中的 Select 选项框不能显示的问题
代码示例
<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 自己用得不对