如何单独增大React AG Grid特定浮动过滤器弹窗宽度？

你当前的CSS选择器.ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child会匹配所有AG Grid的过滤器弹窗，因此导致所有弹窗宽度都被修改。要只针对特定列的过滤器调整宽度，需要更精准的定位方式，以下是两种可行方案：

方案一：使用CSS :has 伪类（简洁但需浏览器支持） #

1. 先给目标列设置唯一的colId作为标识，列定义示例：

const columnDefs = [
  // 其他列配置...
  {
    headerName: '目标列',
    field: 'targetField',
    colId: 'targetColumn' // 唯一列标识
  }
];

2. 通过:has伪类精准定位该列的过滤器弹窗，编写CSS：

.ag-popup-child.ag-menu:has(.ag-filter-header[col-id="targetColumn"]) {
  width: 400px !important;
}

注：:has伪类需要Chrome 105+、Firefox 121+或其他现代浏览器支持。

方案二：通过事件监听添加自定义类（兼容性更好） #

如果需要兼容旧浏览器，可以借助AG Grid的过滤器事件给目标弹窗添加自定义类：

1. 在Grid配置中监听filterOpened和filterClosed事件：

const gridOptions = {
  columnDefs: columnDefs,
  // 其他Grid配置...
  onFilterOpened: (params) => {
    // 判断当前打开过滤器的列是否为目标列
    if (params.column.colId === 'targetColumn') {
      const filterPopup = document.querySelector('.ag-popup-child.ag-menu.ag-filter-popup');
      if (filterPopup) {
        filterPopup.classList.add('custom-target-filter-width');
      }
    }
  },
  onFilterClosed: () => {
    // 关闭过滤器时移除自定义类，避免影响其他弹窗
    const filterPopup = document.querySelector('.custom-target-filter-width');
    if (filterPopup) {
      filterPopup.classList.remove('custom-target-filter-width');
    }
  }
};

2. 编写对应自定义类的CSS：

.custom-target-filter-width {
  width: 400px !important;
}

这两种方法都能精准控制单个过滤器弹窗的宽度，不会影响其他列的过滤器。

内容的提问来源于stack exchange，提问作者SAAD SHAH