React集成Ag-Grid配置headerName后表头空白不显示

两个问题叠加导致表头空白：

• 样式引入路径错误：ag-grid-community/dist/styles/是AG Grid 28及更早版本的样式路径，29+版本中该路径下仅保留了空的兼容文件，没有表头渲染所需的核心样式，加载后会出现表头区域存在但无任何文字内容的现象。
• 列宽设置不合理：第一列设置的width: 20远小于组件默认的最小列宽（48px），即便样式正常加载，该宽度也无法容纳任何文字，会直接把表头文本截断到不可见。

另外你把网格级配置enableRangeSelection写在了列定义里，属于无效配置，不会生效。

直接替换对应文件内容即可：

import React, { useState } from "react";
import { AgGridReact } from "ag-grid-react";
import 'ag-grid-enterprise';
// 替换为29+版本正确的样式引入路径
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const InitialRowData = [
    { year: 1 },
    { year: 2 },
    { year: 3 }
];

const columnDefs = [
    // 调整第一列宽度到合理范围，保证文字正常显示
    { headerName: 'year', field: 'year', width: 80 },
    { headerName: 'premium', field: 'premium', width: 90, editable: true }
];

export function MyGrid() {
    const [rowData, setRowData] = useState(InitialRowData);
    return (
        <div className="ag-theme-alpine" style={{ height: 900, width: 200 }}>
            <AgGridReact
                rowData={rowData}
                columnDefs={columnDefs}
                enableRangeSelection={true}
            />
        </div>
    );
}

如果改完还是异常，先检查本地安装的ag-grid-react、ag-grid-community、ag-grid-enterprise三个包的版本号是否完全一致，大版本/小版本不匹配都会引发各类渲染异常。

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