AG Grid React Inside a MUI Dialog doesn't apply style

Question

AG Grid React inside an MUI Dialog shows data perfectly but doesn't apply any style

Imports

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

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

Code

 <Dialog open={open}
         TransitionComponent={Transition}
         keepMounted
         onClose={handleClose}>
                        <DialogTitle>{"Cart"}</DialogTitle>
                        <DialogContent style={{ height: 'auto' }}>
                            <div className="ag-material" style={{ height: "40vh", width: 
                                "60vh" }}>
                                <AgGridReact
                                    ref={cartGridRef}
                                    gridOptions={gridOptions}></AgGridReact>
                            </div>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={handleClose}>CLOSE</Button>
                            <Button onClick={handleClose}>CLEAR</Button>
                            <Button onClick={handleClose}>PLACE ORDER</Button>
                        </DialogActions>
                    </Dialog>

Answer 1

You need to change className="ag-material" to className="ag-theme-material"