特定组件的自定义样式应用于 Angular 6 中的所有组件

ui 网格，我试图将自定义样式应用于特定组件（我想更改该特定组件的字体大小），但是当我在该特定组件 css 文件中编写 css 代码时，并且在加载该组件后，该样式将应用到所有其他组件也

以下是css文件中的代码

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

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

ts文件中的代码

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

以前的样式没有被应用，所以在联系 telerik 支持后，要求我在 ts 文件中添加 encapsulation:ViewEncapsulation.None 。所以现在样式工作正常，但它被应用到所有组件，不明白为什么会发生。

而不是使用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选择器被 Angular 标记为已弃用，目前没有更好的方法来实现这一点。

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