Angular scss 不适用于 ngx-datatable

Question

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

我在想 styles.scss 正在覆盖代码。但是我可以在组件 scss.

中覆盖 styles.scss 中的代码

我希望数据的某个单元格table 由悬停效果着色。当我在 styles.scss 中编写代码时，它适用于每个 table，但我只需要一个。这就是为什么我在组件 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;
}