custom styling of specific component getting appli

Question

ui grid, I am trying to apply custom styling to specific component(i want to change font size for that specific component), but when i write css code in that particular components css file, and after loading that component that style is getting applied to all the other components also

following is the code in css file

.k-grid td {
 font-size: 10px !important;
 }

 .k-grid tr {
  font-size: 10px;
 }

code in ts file

@Component({
  selector: 'app-work-request-queue-child',
  templateUrl: './work-request-queue-child.component.html',
  styleUrls: ['./work-request-queue-child.component.css'],
  encapsulation:ViewEncapsulation.None
})

previously style was not getting applied so after contacting telerik support the asked me to add encapsulation:ViewEncapsulation.None in ts file.so now the style is working fine but it is getting applied to all the components, not getting why it is happening.

Answer 1

instead of using encapsulation:ViewEncapsulation.None you should make sure that the style is only applied, when your component is loaded.

do that by adding the following to your CSS

:host ::ng-deep .k-grid td {
  font-size: 10px !important;
}

:host ::ng-deep .k-grid tr {
  font-size: 10px;
}

it will make sure that the style is applied, but only, in the context of your component being loaded.

even though the ng-deep selector is marked as depreacated by angular, there is currently no better way to achieve this.

please also read the documentation about component styles and make sure to understand how it works: https://angular.io/guide/component-styles