ag-Grid 标题样式不随组件上的 CSS 改变

Question

我在我的应用程序上使用了 ag-Grid，但我用默认主题 (ag-theme-balham) 破坏了它。

在一个特定的组件上，我想更改标题背景颜色，但是当我在我的 component.scss 文件中添加 CSS 时，没有任何反应。

我在我的 angular-cli.json 文件中添加了 ag-Grid css

  "styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balham.css",
    "styles.scss"
  ],

在 component.scss 文件上，我有以下 CSS

.ag-theme-balham .ag-header {
    background-color: #e0e0e0;
}

但是没有任何反应，并且颜色不会应用于标题。

Answer 1

尝试使用 ::ng-deep 组合器

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .ag-theme-balham .ag-header {
    background-color: #e0e0e0;
}

如果这不起作用，请将您的 css 放在全局样式表中并检查样式是否被正确覆盖

Answer 2

改为覆盖标题单元格类

.ag-theme-balham .ag-header-cell{
    background-color: #e0e0e0;
}

如果你有标题组那么

.ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell{
    background-color: #e0e0e0;
}