Question

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支持后要求我添加封装：ViewEncapsulation.ts文件中没有。所以现在样式可以正常工作，但是它已应用于所有组件，而没有得到为什么发生。

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

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

1 个答案: