未分类

ant design UI库select下拉框在Modal层中滚动样式错乱问题

ant design, react

在使用react的时候，使用了ant design来作为UI组件库，平时主要是做一些中型后台管理系统，前几天碰见了一个比较奇葩的问题。

即，当我使用select下拉框时，如果在平时的界面中还是ok的，但是当我在modal层中使用select下拉框时，当滚动select框时，就会发现options和select输入框出现了主体分离的情况。大概的样子就是类似于下边这种情况

select下拉框样式错乱

类似于图片中展示的样式，在Modal层中，当点击开了下拉框，然后滚动Modal层，这时就会造成上述的样式错乱。

经过在github上的一番寻找，终于在一则issue中找到了解决方法，即是重新对该select的父级元素重新定义，issue链接为[https://github.com/ant-design/ant-design/issues/5395],当然，现在的文档中也有了该props的定义，具体参见ant design的文档[https://ant.design/components/select-cn/#API]

此外，对于input框，有时它的自动补全的下拉框也会让你遇到这种问题，这时只需要在input框上添加autoComplete字段为false就ok了。

那么问题来了，当使用此属性时，我们回去想去看下这个属性干了什么事情，这时候，我们就可以尝试着去查看着这个属性的源码部分。

我们打开antd->lib->cascader->index.d.ts中可以看到对于CAscaderProps的定义

1
2
3
4
5
6
export interface CascaderProps{
    options:CAscaderOptionType[],
    value?: CascaderOptionType[],
    ......
    getPopupContainer?:(triggerNode?:HTMLElement) => HTMLElement
}

此处语法为typescript，想要查看熟悉ts语法的可以去这个链接typescript语法

分享到