I'm trying to implement AG Grid's built-in themes in version 33, but I'm unsure about the correct approach. Here's my current implementation:

import { AgGridReact } from 'ag-grid-react';
import { AllCommunityModule, themeQuartz } 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" style={{height: 600}}>
    <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        theme={themeQuartz}  // theme prop
        // other props...
    />
</div>

I'm using the latest ag-grid-react and ag-grid-community, i know i'm still importing the css instead of using gridOptios, and if i want to use it the old way, is that how you do it above?

"dependencies":{
"ag-grid-community": "^33.0.3",
"ag-grid-react": "^33.0.3",
// all other packages
}

this is how it looks like, i don't think themeQuartz look like this

I'm trying to implement AG Grid's built-in themes in version 33, but I'm unsure about the correct approach. Here's my current implementation:

import { AgGridReact } from 'ag-grid-react';
import { AllCommunityModule, themeQuartz } 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" style={{height: 600}}>
    <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        theme={themeQuartz}  // theme prop
        // other props...
    />
</div>

I'm using the latest ag-grid-react and ag-grid-community, i know i'm still importing the css instead of using gridOptios, and if i want to use it the old way, is that how you do it above?

"dependencies":{
"ag-grid-community": "^33.0.3",
"ag-grid-react": "^33.0.3",
// all other packages
}

this is how it looks like, i don't think themeQuartz look like this

• reactjs
• typescript
• ag-grid-react

1 Answer 1

Do not mix CSS imports and Theming API.

Remove legacy CSS imports when using the Theming API. It's essential to eliminate any legacy CSS imports to prevent conflicts and ensure that the new theming approach functions correctly. Specifically, remove imports like:​

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

In AG Grid version 33 and later, the default theme is Quartz. If you don't specify a theme, AG Grid applies the Quartz theme by default. However, explicitly setting the theme ensures clarity and allows for customization. ​

Migrating from Legacy Themes: If you're transitioning from legacy CSS-based themes to the Theming API, be aware that the appearance may differ due to changes in default styling. To achieve a similar look and feel, you might need to adjust theme parameters accordingly.