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

Question

ui grid，我正在尝试将自定义样式应用于特定组件（我想更改该特定组件的字体大小），但是当我在该特定组件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文件中添加封装：ViewEncapsulation.None。现在样式工作正常但是它已经应用于所有组件，而不是为什么它正在发生。

Answer 1

而不是使用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