antd-select组件样式,option下拉选中勾选样式,下拉箭头位置,使用Drawer样式失效

注意:如果在使用抽屉Drawer组件时,在less写法中修改下拉样式ant-select-dropdown-menu不生效!检查是否设置Drawer组件getContainer属性是否为false

原因:

getContainer 属性决定了 Drawer 渲染的 HTML 节点位置,默认情况下,Drawer 会被渲染到 body 元素上。这样做的好处是避免了 Drawer 内容的样式受到外部容器样式的影响
当你设置了 getContainer={false},Drawer 将直接渲染在其父组件内,而不是作为 body 的直接子元素。这样做虽然可以让 Drawer 更好地融合进父组件的布局中,但是也可能导致一些层叠上下文(Stacking Context)或者样式继承的问题,尤其是当 Drawer 包含诸如下拉菜单这样需要==“溢出”==(overflow)的子组件时。

补充:

当设置下拉内容格式不生效并且使用dropdownClassName/dropdownStyle均不生效!
注意检查设置的ant-select-selection,.ant-select-selection 类中在CSS文件中的位置较早,具有较高的优先级会覆盖设置
解决:通过dropdownClassName自定义下拉类,将css通过important覆盖

css

//输入框下拉箭头移到前方
.ant-select-arrow {
   left: 5px;
   right: auto;
}
// select外部输入框样式
.ant-select-selection {
    background-color: red;
    color: red;
}
 
// select下拉箭头以及关闭键样式
.ant-select-selection .anticon {
    color: red;
}

// 下拉菜单的最外层容器的类名
.ant-select-dropdown {
	background-color:'#fff'
    color: red;
}
//这里可以修改鼠标选中!焦点!样式
.ant-select-dropdown,li {
    color: red;
}

//下拉内容列样式
.ant-select-dropdown-menu-vertical li{
	color:red
} 
// 下拉选项的 hover 样式
.ant-select-dropdown-menu-item:hover {}

// 下拉菜单选中的数据样式
.ant-select-dropdown-menu-item-selected{}

// 自定义对号的颜色
.ant-select-dropdown-menu-item-selected svg {
    fill: red; /* 修改为期望的颜色 */
}
.ant-select-dropdown-menu-item:hover svg{}
  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值