Angular Scss不适用于ngx-datatable

Question

我的scss有问题。它没有使用下面的scss文件中的css命令。这个scss文件就是该文件，它是使用组件生成的。 如果我将代码放入styles.scss文件（该文件包含在angular.json文件中），则该命令有效。

我当时认为styles.scss会覆盖代码。但是我可以覆盖组件scss中styles.scss中的代码。

我希望数据表的单元格被悬停效果所着色。当我在styles.scss中编写代码时，它适用于每个表，但是我只需要一个表。这就是为什么我需要在组件scss中使用它。

example.component.ts文件

@Component({
selector: 'app-example.component',
templateUrl: './example.component.html',
styleUrls: ['example.component.scss']
})

example.component.scss文件

.ngx-datatable:not(.cell-selection) .datatable-body-row:hover
{
   background: blue;
}

Answer 1

要更改组件的内部样式，您需要使用/deep/或::ng-deep（基于您使用的Angular版本）

尝试下面的代码

已弃用

.ngx-datatable:not(.cell-selection) /deep/ .datatable-body-row:hover
{
   background: blue;
}

推荐

.ngx-datatable:not(.cell-selection) ::ng-deep .datatable-body-row:hover
{
   background: blue;
}