AG Grid v33内置主题使用疑问：样式异常及旧方式确认

问题根源 #

你当前的代码错误混用了**CSS导入（旧方式）和CSS-in-JS（新方式）**的主题配置逻辑：

• theme={themeQuartz} 是CSS-in-JS方案的专属配置项，和CSS文件导入方式冲突
• AG Grid的CSS主题样式依赖父容器的主题类名生效，你未给包裹AgGridReact的容器添加对应类名

旧方式（CSS导入）的正确实现步骤 #

1. 保留必要的CSS文件导入
2. 移除AgGridReact组件上的theme属性
3. 给包裹AgGridReact的父容器添加主题类名ag-theme-quartz

修正后的完整代码 #

import { AgGridReact } from 'ag-grid-react';
import { AllCommunityModule } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

ModuleRegistry.registerModules([AllCommunityModule])

const columnDefs: ColDef[] = useMemo(() => [
        // fields definition
    ], []);

const defaultColDef = useMemo(() => ({
        flex: 1,
        minWidth: 100,
        resizable: true,
        wrapHeaderText: true,
        autoHeaderHeight: true
    }), []);

// ... in render ...
<div className="relative ag-theme-quartz" style={{height: 600}}>
    <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        // 移除theme属性
        // other props...
    />
</div>

关键说明 #

• AG Grid的CSS主题系统基于容器类名实现，必须给组件的直接父容器添加ag-theme-xxx类，样式才能正确作用到表格
• themeQuartz变量仅适用于CSS-in-JS方案，若使用该方案需移除CSS文件导入，改用官方CSS-in-JS配置流程（你明确要使用旧方式，按上述修正即可）

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