cssreactjsag-grid

How to change bg color of ag-grid in react?

I'm trying to change the bg color of ag-grid in React application.
I have tried row cell style but I want to change the full bg of my grid.
my code is:

{
  headerName: "Module Name",
  field: "ModuleName",
  sortable: true,
  filter: true,
  resizable: true,
  cellStyle: function(params) {
     return { backgroundColor: "#red" };
  }
},
Solution

  • You could use the following CSS to change the background:

    .ag-root, .ag-header, .ag-cell {
  background-color: #f5f5ff !important;
}

    https://embed.plnkr.co/P3HrdAQUOA8rkmIO/

    Another option would be to customize the theme: https://www.ag-grid.com/javascript-grid-themes-provided/#customizing-sass-variables. This would a more complex solution, but would be better if you want to override a bunch of styles.