Search code examples
ag-gridag-grid-angular

ag-grid v.23, using ag-theme-material, doesn't allow making the header transparent

I am using ag-theme-material. I migrated to Angular 9, and I had to migrate ag-grid to v.23.0.0. However, some of the styles got changed and I am not able to change them back. The biggest issue I have is the grid's header row used to be transparent (I was on version 20.2.0 before the upgrade):

.ag-header {
  background-color: transparent;
}

This doesn't work anymore. It sets my header row background to white, and I can't see the headers because the text is white. If I change it to a specific color, it works, but it doesn't accept transparent. I've tried setting opacity to 0, using an image, nothing works!

So I added a variable in my SCSS file to override this theme parameter, as specified in their migration guideline - https://www.ag-grid.com/documentation/javascript/themes-v23-migration/.

$ag-theme-override-params: (
  header-background-color: transparent
);

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat.scss";

But that doesn't work either. Now, I know this variable is doing its job because I am able to override the checkbox-checked-color using it...

Am I naming it wrong? What am I missing???

Solution

  • FYI for anyone facing the same problem, I tracked it down. In version 23, ag-grid has specified a background color (in a variable) in .ag-theme-material .ag-root-wrapper (it's part of _ag-theme-base-mixin.scss), and it overrides the CSS for ag-header class. So you have to set the background-color CSS property to transparent both in .ag-header and in ag-grid-angular .ag-root-wrapper.ag-layout-normal.ag-ltr.

    ag-grid-angular {
  width: 100%;
  height: 100%;
  .ag-root-wrapper.ag-layout-normal.ag-ltr {
    background-color: transparent;
  }
}

.ag-theme-material .ag-header {
    background-color: transparent;
}