angular - 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

改写 header-cell 类

.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

background-color用覆盖!important。

那是：

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