特定组件的自定义样式应用于 angular 6 中的所有组件 [英] custom styling of specific component getting applied to all the components in angular 6

问题描述

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

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

以下是css文件中的代码

following is the code in css file

.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.所以现在样式工作正常，但它已应用于所有组件，不明白为什么会这样正在发生.

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.

推荐答案

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

instead of using encapsulation:ViewEncapsulation.None you should make sure that the style is only applied, when your component is loaded.

通过将以下内容添加到您的 CSS 来实现

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.

即使 ng-deep 选择器被 angular 标记为已弃用，目前也没有更好的方法来实现这一点.

even though the ng-deep selector is marked as depreacated by angular, there is currently no better way to achieve this.

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

please also read the documentation about component styles and make sure to understand how it works: https://angular.io/guide/component-styles

这篇关于特定组件的自定义样式应用于 angular 6 中的所有组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！