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 combinator

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;
}

如果你有标题组，那么

.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: }

ag-Grid标题样式在组件上不随CSS更改

4 个答案: