ag-Grid header 样式未随组件上的 CSS 改变

Question

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

在一个特定组件上，我想更改 header 背景颜色，但是当我在我的 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;
}

但是没有任何反应，并且颜色没有应用到 header。

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

改写 header-cell class

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

如果你有header-group那么

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

Answer 3

这是一个有点老的问题，但对于现在进入它的任何人来说，这个解决方案对我都很有效。您需要写入的标签是：

::ng-deep .ag-theme-balham .ag-header-cell-label{
/* your css here*/}

标签 !important 也可以工作

Answer 4

用 !important 覆盖 background-color。

即：

:host {
    ::ng-deep { background-color: }

ag-Grid header 样式未随组件上的 CSS 改变

ag-Grid header styles not changing with CSS on component

ag-grid

ag-grid-ng2

angular