而不是使用encapsulation:ViewEncapsulation.None，您应该确保仅在加载组件时才应用样式.

通过在CSS中添加以下内容来做到这一点

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

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

这将确保仅在加载组件的上下文中应用样式.

即使ng-deep选择器已被标记为已弃用"，但目前尚无更好的方法.

还请阅读有关组件样式的文档，并确保了解其工作方式: https://angular.io/guide/component-styles

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.

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