Angular scss not working for ngx-datatable

Question

i have a problem with my scss. It is not using the css command from the scss file which is below. This scss file is that one, which is generate with the component. The command works, if i put the code in the styles.scss file, which is included in the angular.json file.

I was thinking that the styles.scss is overwriting the code. But i can overwrite the code from styles.scss in the component scss.

I want that a cell of a datatable is colored by a hover effekt. When i write the code in the styles.scss, it works for every table, but i need it only in one. Thats why i need it in the component scss.

example.component.ts file

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

example.component.scss file

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

Answer 1

To change the component's internal styles you need to use /deep/ or ::ng-deep (based on the version of Angular you are using)

Try the code below

Deprecated

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

Recommended

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