reactjs - Can't use built-in themes with the new theming API - Stack Overflow

admin管理员组

文章数量:1425200

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

Share Improve this question Follow edited Mar 20 at 8:57 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Jan 2 at 7:56 john_smithjohn_smith 9522 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： reactjsCan39t use builtin themes with the new theming APIStack Overflow