React中如何自定义AgGrid的ag-body-viewport高度修复滚动问题

问题描述 #

我在实现React版AgGrid时，将外层容器高度设为300px，但加载数据后网格无法滚动，行显示异常。检查HTML后发现，手动修改ag-body-viewport类的高度使其小于网格容器高度就能解决问题，请问如何通过CSS文件正确覆盖该类的高度？

相关代码 #

AgGrid实现代码 #

<Row className={`dds__mb-4 ${styles.agGridHeight}`}>
  <Col>
    <SkeletonWrapper
      toRender={() => (
        <AgGridWrapper
          className={`${styles.agGridHeight}`}
          gridApi={gridApi.current as GridApi}
          data-testid="add-users-select-role-grid"
        >
          <p>{}</p>
          <AgGridReact
            columnDefs={columnDefs()}
            rowSelection="multiple"
            rowMultiSelectWithClick
            suppressRowClickSelection
            pagination={true}
            paginationPageSize={6}
            suppressPaginationPanel={true}
            defaultColDef={{
              sortable: true,
              flex: 1,
              minWidth: 100,
              filter: false,
              resizable: true,
            }}
            domLayout="normal"
            frameworkComponents={{
              customNoRowsOverlay: CustomNoRowsOverlay,
            }}
            noRowsOverlayComponent="customNoRowsOverlay"
            rowData={roles}
            onGridReady={onGridReady}
            suppressCellSelection
            context={this}
            accentedSort
            localeText={{
              loadingOoo: "Loading",
              noRowsToShow: "Nothing to show",
            }}
            scrollbarWidth={3}
            alwaysShowVerticalScroll
          />
        </AgGridWrapper>
      )}
    />
  </Col>
</Row>

Wrapper组件代码 #

import React, { useEffect, useRef, useCallback } from "react";
import { Props } from "./AgGridWrapper.interfaces";

const AgGridWrapper = ({
  gridApi,
  className,
  children,
  ...otherProps
}: Props) => {
  const wrapperRef = useRef<HTMLDivElement>(null);

  const setWrapperWidth = useCallback(() => {
    if (wrapperRef.current) {
      wrapperRef.current.style.width = "auto";
      gridApi?.sizeColumnsToFit();
      wrapperRef.current.style.width =
        wrapperRef.current.offsetWidth + 1 + "px";
    }
  }, [gridApi]);

  const toggleTimer = useCallback(
    () => setTimeout(setWrapperWidth, 300),
    [setWrapperWidth],
  );

  useEffect(() => {
    setWrapperWidth();

    window.addEventListener("resize", setWrapperWidth);
    window.addEventListener("uicNavLeftExpandEvent", toggleTimer);
    window.addEventListener("uicNavLeftCollapseEvent", toggleTimer);

    return () => {
      window.removeEventListener("resize", setWrapperWidth);
      window.removeEventListener("uicNavLeftExpandEvent", toggleTimer);
      window.removeEventListener("uicNavLeftCollapseEvent", toggleTimer);
    };
  }, [gridApi, setWrapperWidth, toggleTimer]);

  return (
    <div
      className={`ag-theme-material ${className}`}
      ref={wrapperRef}
      {...otherProps}
    >
      {children}
    </div>
  );
};

export default AgGridWrapper;

现有CSS代码 #

.ag-grid-border {
  border-radius: 4px !important;
}

.ag-grid-height {
  height: 27vh;
}

.ag-body-viewport {
  height: 223px;
}

.inputWidth {
  width: 40%;
}

.gridColHeight {
  height: 100%
}

.ag-body{
  height: 'inherit'
}

解决方法 #

1. 提升ag-body-viewport样式优先级 #

AgGrid自带样式优先级较高，直接写类名无法覆盖，需要结合父容器类名提升权重：

/* 用外层容器类嵌套，确保优先级高于默认样式 */
.ag-grid-height .ag-body-viewport {
  height: calc(100% - 57px) !important; 
  /* 57px为AgGrid默认表头高度，可根据实际布局调整 */
  overflow-y: auto !important;
}

用calc(100% - 57px)代替固定值223px，能自动适配容器高度，避免不同屏幕下的适配问题。

2. 修正容器高度设置 #

如果需要固定300px高度，修改ag-grid-height类：

.ag-grid-height {
  height: 300px !important;
  overflow: hidden; /* 防止容器自身出现滚动条 */
}

3. 清理无效样式 #

现有CSS中.ag-body的写法错误（CSS属性值不能用单引号），且会干扰布局，直接删除：

/* 删除该行无效样式 */
.ag-body{
  height: 'inherit'
}

4. 确认网格配置 #

确保AgGridReact的domLayout属性为normal（你已正确设置），不要使用autoHeight，否则网格会自动撑开容器，导致滚动失效。

调整后，ag-body-viewport会自适应容器高度，超出内容自动显示垂直滚动条，解决行显示异常和滚动失效的问题。

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