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

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 支持后要求我在 ts file.so 中添加 encapsulation: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 选择器被 angular 标记为弃用，但目前没有更好的方法来实现这一点。

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

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

custom styling of specific component getting applied to all the components in angular 6

telerik

kendo-grid

angular

angular6