css - Angular scss 不适用于 ngx-datatable

Question

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

我在想 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;
}