Mixed Theming Approaches Copy Link
In v33 the default approach to theming AG Grid has been updated to use the Theming API. This error occurs when a theme is set via the theme property but the legacy CSS files have not been removed.
There are two ways to resolve this, either adopt the Theming API or continue with the legacy themes. Migrating to the Theming API covers both in full.
Adopt the Theming API Copy Link
Remove the legacy CSS, then pass a theme object to the theme grid option. Follow the steps in Adopt the Theming API.
Only ag-grid.css sets the marker the grid detects, so removing it silences the message. Remove the ag-theme-*.css files along with it, or you will be left with part of a legacy theme applied over the new one.
The import is easy to miss, because it can be in any of these places:
- A side-effect import in an entry file or component, such as
import 'ag-grid-community/styles/ag-grid.css'. - A
@useor@importin a global stylesheet. - A
<link>tag in your HTML, often pointing at a copy of the file rather than the package. - A build configuration, such as the
stylesarray inangular.json, or global CSS registered by a framework's app shell.
Continue with legacy Themes Copy Link
Pass the string legacy to the theme grid option and keep the CSS files as they are. See Continue with Legacy Themes.
Where you have several grids, a Global Grid Option sets this once for all of them:
import { provideGlobalGridOptions } from 'ag-grid-community';
// Mark all grids as using legacy themes
provideGlobalGridOptions({ theme: 'legacy' });