Angular 组件样式（CSS）对于引入UI库的内容不起作用

一、 问题描述

Angular组件样式文件中添加css样式不生效，但写入自定义的样式文件，然后引入反而生效

二、问题分析

Angular组件样式只作用于当前组件，如果这个组件除了模板内容外，还存在其他UI框架嵌入的组件，而这些组件不会敏感组件样式 ，为了让组件样式对这个嵌入的内容起作用，Angular使用的特殊的伪类选择器:host和:host-context选择器，这两个选择器都可以像函数一样使用 如：

:host(active):{
	background-color: #333
}

具体如何使用Angular特殊选择器，请查看官网

解决办法

在样式前面加入 :host ::ng-deep ，如：

:host ::ng-deep .dx-field-item-label-text {
    font-weight: 600px;
}

也可以这样：

:host {
    display: flex;
    justify-content: center;
    height: 100%;
}
::ng-deep .dx-field-item-label-text {
    font-weight: 600px;
}