一、 问题描述
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;
}