问题描述:在使用 AntDesign 的 Select 组件时,如果将其渲染在 Portal 下,可能会出现遮盖在其他组件之上的情况。
解决方法:通过自定义样式来修改 Select 组件 Portal 的 z-index 层级。具体方法为:
import {Select} from 'antd';
const { Option } = Select;
class Demo extends React.Component {
render() {
return (
);
}
}
在这里,getPopupContainer 函数指定了 Select 渲染的父容器为触发节点(triggerNode)的父节点。
.parent-container .ant-select-dropdown {
z-index: 1001 !important; /* 修改 Select 组件的层级 */
}
这里通过修改 .ant-select-dropdown 元素的 z-index 属性来修改 Select 组件的层级。
完整示例代码:
import {Select} from 'antd';
import './index.css';
const { Option } = Select;
class Demo extends React.Component {
render() {
return (
);
}
}
.parent-container .ant-select-dropdown {
z-index: 1001 !important;
}
在这里,我们通过在父容器 .parent-container 中添加样式来修改 Select 组件的层级。这种方法可以避免修改全局样式,并且可以针对不同的 Select 组件设置不同的层级。