特定组件的自定义样式将应用于角度6中的所有组件 [英] custom styling of specific component getting applied to all the components in 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支持后要求我添加封装:ViewEncapsulation.ts文件中没有.因此现在样式可以正常工作，但是它已应用于所有组件，而没有得到为什么发生.

解决方案

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

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

following is the code in css file

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

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

code in ts file

@Component({
  selector: 'app-work-request-queue-child',
  templateUrl: './work-request-queue-child.component.html',
  styleUrls: ['./work-request-queue-child.component.css'],
  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.

解决方案

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

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.

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

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