时间戳

首页 > 解决方案 > 特定组件的自定义样式应用于 Angular 6 中的所有组件

angular - 特定组件的自定义样式应用于 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 文件中添加封装：ViewEncapsulation.None。所以现在样式工作正常，但它被应用于所有组件，不知道为什么会发生。

标签： angulartelerikangular6kendo-grid

解决方案

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

通过将以下内容添加到您的 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

推荐阅读