modal框的dom与<div id='root'>同级别，因此不能以user-manage为父元素定义样式，以.modal定义样式会污染其他模块的模态框，（下拉框选项的级别也与root同级），即：

// F12观察组件展开dom结构
<div id='app'>
    <div id='root'>
        <seletion id='user-manage'>
           页面内容：搜索行列表等
        </seletion>
    </div>
    <div id='modal'>
        模态框内容
        <div class='select'>下拉框</div>
    </div>
    
    <div class='select-dropdown'>
        下拉框选项
    </div>
</div>

解决方案：使用getContainer和getPopupContainer分别将模态框和select-dropdown挂载到指定父元素下面

// antd组件代码如下
<Modal getContainer={() => document.getElementById('user-manage')}>

<Select getPopupContainer={() =>document.getElementById('rcDialogTitle0')}>

// F12观察组件展开dom结构
<div id='app'>
    <div id='root'>
        <seletion id='user-manage'>
           页面内容：搜索行列表等~~~~
           <div id='modal'>
               模态框内容
               <div class='select'>下拉框</div>~~~~
               <div class='select-dropdown'>
                   下拉框选项
               </div>
           </div>
        </seletion>
    </div>
</div>

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

// dom结构：
<xxx class='ant-select-dropdown-menu-item-group'>
    <div>喷涂检测组</div>
    <ul>
        <li>业务组管理</li>
        <li>数据组管理员</li>
        <li>模型管理员</li>
        <li>普通人员</li>
    </ul>
</xxx>
<xxx class='ant-select-dropdown-menu-item-group'>
    <div>挂网填浆检测组</div>
    <ul>
        <li>业务组管理</li>
        <li>数据组管理员</li>
        <li>模型管理员</li>
        <li>普通人员</li>
    </ul>
</xxx>

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;  
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/7804