'Css issues when using ag-grid in more than a view in our react app

We are using the inside one of our react components which we called "GridViewWrapper" in which i've made all the required css et js ag-grid's related imports (i will share below how i did the imports).

Actually, Since a long time we've been using that "GridViewWrapper" only in one view in the whole app without any problem but then we needed to reuse it somewhere else in the app (in a different view which means that in the runtime that component will never be instanciated more than once in the same time because both views won't be shown together in the same time too)

Now, since i've started to used our "GridViewWrapper" in two views of our app , we started to have css issues in the ag-grid (some looks to be broken , for example checkboxes can't get checked anymore). It looks like there is a mess in the order of loading css files and some css might be overriden by another. https://i.imgur.com/jE8vcSv.gif

When i get started using the ag-grid in our react app , i don't remember i've seen any required webpack specific config for the ag-grid or specifically for typescript (which we are using it in our app too). But now i found this SO thread which talks about a webpack config https://stackoverflow.com/a/56552750/1705922 (they're using react too) and i also found this ag doc also mentionning a webpack config https://www.ag-grid.com/javascript-data-grid/building-typescript/.

Should we implement that in our react app too ?

Here is how i made the css et js ag-grid related files :

import { LicenseManager, RowNode } from "ag-grid-enterprise";
import {
  GridApi,
  Column,
  RowClassParams,
  PasteStartEvent,
  PasteEndEvent,
  CellValueChangedEvent,
  CellEditingStoppedEvent,
  CellEditingStartedEvent,
  ColumnMovedEvent,
  ColumnResizedEvent,
  DragStoppedEvent,
  GridReadyEvent,
  RowDragEvent,
} from "ag-grid-community";

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";

import { AgGridReact } from "ag-grid-react";

Are we missing something ?

These are the ag-grid verions in the package.json

"ag-grid-community": "^26.2.0",
"ag-grid-enterprise": "^26.2.0",
"ag-grid-react": "^26.2.0",


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source