如何在AgGrid React自定义过滤器中设置overflow: visible

问题核心是AG Grid的过滤器弹窗容器默认设置了溢出限制，同时Semantic UI Dropdown的菜单默认受父容器约束，导致下拉选项被截断无法完整显示。以下是具体修复方案：

1. 覆盖AG Grid过滤器容器的溢出样式 #

AG Grid的过滤器弹窗（.ag-filter-popup）和内部内容容器（.ag-filter-body-wrapper）默认有overflow: auto或hidden，需要强制改为visible：

.ag-filter-popup {
  overflow: visible !important;
}
.ag-filter-body-wrapper {
  overflow: visible !important;
  max-height: none !important;
}

2. 调整Semantic UI Dropdown菜单的定位与溢出 #

Semantic UI的Dropdown菜单默认相对父容器定位，需改为绝对定位并提升层级，同时取消自身滚动限制：

.ui.dropdown .menu {
  overflow-y: visible !important;
  position: absolute !important;
  z-index: 1060 !important; /* 需高于AG Grid默认层级 */
}

3. 更新自定义过滤器的Styled组件 #

修改testFilter.tsx中的StyledDropdown，整合上述样式：

const StyledDropdown = styled.div`
  z-index: 1050;
  .ui.dropdown {
    width: 100%;
    .menu {
      overflow-y: visible !important;
      position: absolute !important;
      z-index: 1060 !important;
    }
  }
  padding: 4px;
  width: 300px;
  margin-bottom: 8px;
  padding: 10px;
  overflow: visible;

  /* 覆盖AG Grid过滤器容器样式 */
  .ag-filter-popup {
    overflow: visible !important;
  }
  .ag-filter-body-wrapper {
    overflow: visible !important;
    max-height: none !important;
  }
`;

额外注意事项 #

• 若样式不生效，可增加选择器权重（比如加上父类.ag-theme-quartz）以覆盖AG Grid主题样式
• 确保Dropdown的fluid属性不会干扰菜单宽度设置
• 若页面存在其他弹窗组件，需调整z-index避免层级冲突

内容的提问来源于stack exchange，提问作者Gustavo Sanchez