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 - .
$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???
1 Answer
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;
}
