Угловой scss не работает для ngx-datatable

Question

У меня проблема с моим scss. Он не использует команду css из файла scss, который находится ниже. Этот файл scss является тем, который генерируется с компонентом. Команда работает, если я поместил код в файл styles.scss, который включен в файл angular.json.

Я думал, что styles.scss переписывает код. Но я могу переписать код из styles.scss в компоненте scss.

Я хочу, чтобы ячейка таблицы данных была окрашена эффектом парения. Когда я пишу код в styles.scss, он работает для каждой таблицы, но мне нужно только в одной. Вот почему он мне нужен в компоненте scss.

файл example.component.ts

@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

Для изменения внутренних стилей компонента необходимо использовать /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;
}