700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 修改antDesign中Select下拉菜单样式

修改antDesign中Select下拉菜单样式

时间:2018-06-20 04:56:36

相关推荐

修改antDesign中Select下拉菜单样式

antd版本需大于4.23.0

菜单渲染父节点,默认渲染到 body 上。

先渲染菜单到select外层父节点:

先在父节点div中定义一id:<div id="dropFather">

在<Select>中使用getPopupContainer属性:

getPopupContainer={() => document.getElementById('dropFather')}

就可以在Elements中看到option了。

在使用popupClassName="drop" ,在less中写需要的样式

/*修改下拉菜单背景色,hover字体颜色背景色,选中项背景色字体颜色*/.drop {background-color: #3F4666;.ant-select-item.ant-select-item-option {color: #FFF;background: #3F4666;}.ant-select-item-option-active:not(.ant-select-item-option-disabled) {// color: #8BC2D3;// background-color: transparent;color: #238EFA;background: #3F4666;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。