angular – 样式不适用于组件级别,但适用于全局级别
发布时间：2020-12-17 07:06:46 所属栏目：安全 来源：网络整理
导读：我正在使用ngPrime组件,如果我将它们设置为样式,则不适用于dashboard.component.sass文件,但是当我使用global style.sass文件时它们会应用. dashboard.component.html文件 p-dropdown [options]="reports" styleClass="report-dropdown" ng-template let-ite
|
我正在使用ngPrime组件,如果我将它们设置为样式,则不适用于dashboard.component.sass文件,但是当我使用global style.sass文件时它们会应用.
dashboard.component.html文件 <p-dropdown [options]="reports" styleClass="report-dropdown">
<ng-template let-item pTemplate="selectedItem">
<i class="fas fa-th" style="fill: white;"></i>
<span style="vertical-align:middle">
{{item.label}}</span>
</ng-template>
</p-dropdown>
dashboard.component.scss和全局style.scss文件 .report-dropdown {
.ui-dropdown-label {
background-color: $secondary;
color: white;
}
.ui-dropdown-trigger {
color: white;
background-color: $secondary;
border: none;
}
}
解决方法
如果要在组件中设置样式,则只需在要应用的规则之前使用ng-deep.
https://angular.io/guide/component-styles#deprecated-deep–and-ng-deep 它确实已被弃用,但到目前为止还没有替代品,所以你现在也可以使用它 dashboard.component.scss ::ng-deep .report-dropdown {
.ui-dropdown-label {
background-color: $secondary;
color: white;
}
.ui-dropdown-trigger {
color: white;
background-color: $secondary;
border: none;
}
}
我不知道primeng,但我分叉了一个旧的stackblitz显示颜色变化(虽然下拉菜单没有打开) https://stackblitz.com/edit/primeng-bootstrap-ylpzwd?file=app/app.component.scss 其他方案 另一种解决方案是在全局样式表中设置样式.如果你的CSS规则比ngPrime默认应用的那些规则更具体,那么这将有效 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |