css - Angular scss 不适用于 ngx-datatable

Question

我的 scss 有问题。它没有使用下面的 scss 文件中的 css 命令。这个 scss 文件就是那个文件，它是由组件生成的。如果我将代码放在 style.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;
}

score 0 · Accepted Answer

要更改组件的内部样式，您需要使用/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;
}

1 回答 1