antd-Select组件下拉选项的样式修改不了(getContainer/getPopupContainer)(模态框类似)

antd-Select组件下拉选项的样式修改不了(getContainer/getPopupContainer)(模态框类似)_第1张图片

modal框的dom与

同级别,因此不能以user-manage为父元素定义样式,以.modal定义样式会污染其他模块的模态框,(下拉框选项的级别也与root同级),即:

// F12观察组件展开dom结构
页面内容:搜索行列表等
下拉框选项内容

解决方案:使用getContainer和getPopupContainer将模态框,挂在到指定id,select-dropdown挂载到其父元素下面

// 好
 document.getElementById('user-manage')}>

// 更好更简洁,实测有效


// 不好
 e.parentNode}>
// F12观察组件展开dom结构
页面内容:搜索行列表等~~~~

小知识点:select-dropdown样式排版

// dom结构:

    
喷涂检测组
  • 业务组管理
  • 数据组管理员
  • 模型管理员
  • 普通人员
挂网填浆检测组
  • 业务组管理
  • 数据组管理员
  • 模型管理员
  • 普通人员

1.4个li如何一行2个:

#user-manage #modal .select-dropdown ul li{  
  display: inline;  
  float: left;  
}

2.排除最后一个元素,不给下border样式

#user-manage #modal .select-dropdown .ant-select-dropdown-menu-item-group:not(:last-of-type){  
  border-bottom: 0.5px #CFD8DF solid;  
}

你可能感兴趣的