How do I go about customizing the Ag-Grid themes (eg. ag-theme-material.css) in an existing Angular App?
The documentation they have provided is lacking, as it doesn't explain how to perform these changes/configurations.
Any help would greatly be appreciated.
Add ag-grid-overrides.scss file and put the saas variable you want to modify for the ag-grid theme. Full list of sass variables available can be found in this link - https://github.com/ag-grid/ag-grid/tree/master/src/styles. Import ag-grid-overrides.scss in your component.ts file. You can still have your own .css file for each component as shown below in app.component.css file.
app.component.ts
import '../ag-grid-overrides.scss';
app.component.html
<ag-grid-angular class="data-grid ag-theme-fresh" [gridOptions]="gridOptions">
</ag-grid-angular>
ag-grid-overrides.scss
// Customize the look and feel of the grid with Sass variables
// Up-to-date list of variables is available in the source code: https://github.com/ag-grid/ag-grid/blob/latest/src/styles/theme-fresh.scss
$icons-path: "~ag-grid/src/styles/icons/";
// changes the border color
$border-color: #FF0000;
// Changes the font size
$font-size: 14px;
// Changes the font family
//$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
// Reverts the cell horizontal padding change between ag-fresh and ag-theme-fresh
//$cell-horizontal-padding: 2px;
// changes the icon color
// $icon-color: red;
//$primary-color: green;
@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';
app.component.css (not required as this is a custom class on ag-grid-angular)
.data-grid {
width: 500px; height: 300px; margin-bottom: 1rem;
}
angular-cli.json
"styles": [
"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css",
"styles.scss",
"ag-grid-overrides.scss"
]
