I am encountering an issue with my SCSS. It seems that the CSS command from the SCSS file below is not being utilized. This particular SCSS file is generated with the component.
Interestingly, when I place the code in the styles.scss file included in the angular.json file, the command works without any problems. Originally, I thought that the styles.scss was overriding the code, but it appears that I can override the code from styles.scss in the component's SCSS as well.
My goal is to have a hover effect on a cell within a specific datatable only. When I write the code in the styles.scss, it impacts every table rather than just the one I need. That’s why it is essential for me to have it in the component's SCSS file.
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;
}