问题分析 #

你遇到的自定义主题样式不生效问题，核心原因是缺少Quartz主题的基础样式导入，以及可能的样式加载顺序错误。Ag Grid的自定义主题需要基于对应主题的基础样式文件才能生效，仅导入ag-grid.css不足以让Quartz主题的自定义参数生效。

修复步骤 #

1. 补充Quartz主题基础样式导入 #

将原有的样式导入修改为同时包含核心基础样式和Quartz主题样式，确保加载顺序正确：

import { AgGridReact } from 'ag-grid-react';
import { themeQuartz } from 'ag-grid-community';
// 先导入核心基础样式
import 'ag-grid-community/styles/ag-grid.css';
// 再导入Quartz主题的基础样式
import 'ag-grid-community/styles/ag-theme-quartz.css';

2. 确认主题属性传递正确 #

你的代码中已经通过theme={myTheme}将自定义主题传递给AgGridReact组件，这部分无需修改，但需确保组件没有被其他全局样式强制覆盖。如果存在全局样式冲突，可以尝试给Grid容器添加独立类名并设置更高优先级的样式。

3. 清除浏览器缓存 #

如果修改后样式仍未生效，强制刷新浏览器（Ctrl+Shift+R或Cmd+Shift+R）清除缓存，避免旧样式文件干扰。

4. 验证企业版授权状态 #

虽然你提到拥有有效授权，但可以在onGridReady中添加简单验证，确保企业版功能正常加载：

const onGridReady = useCallback((params) => {
  gridRef.current.api = params.api;
  // 验证企业版是否激活
  console.log('Enterprise status:', params.api.isEnterprise());
}, []);

如果控制台输出true，说明授权正常；如果为false，检查授权密钥的配置是否正确（通常通过LicenseManager.setLicenseKey()在应用入口设置）。

修复后的完整代码示例 #

import { useRef, useState, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { themeQuartz } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

// 自定义主题
const myTheme = themeQuartz.withParams({
  accentColor: "#0071E9",
  backgroundColor: "#FFFFFF",
  borderColor: "#C5DAF1",
  borderRadius: 0,
  browserColorScheme: "inherit",
  cellTextColor: "#323A3E"
});

const MyCustomThemedGrid = () => {
  const gridRef = useRef(null);
  const [columnDefs] = useState([
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' },
  ]);
  const [rowData] = useState([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
  ]);

  const onGridReady = useCallback((params) => {
    gridRef.current.api = params.api;
    console.log('Enterprise status:', params.api.isEnterprise());
  }, []);

 return (
    <div style={{ height: 300, width: 600 }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowData={rowData}
        theme={myTheme} 
        onGridReady={onGridReady}
      />
    </div>
  );
};

export default MyCustomThemedGrid;

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