gpt4 book ai didi

angular - 样式不适用于组件级别但适用于全局级别

转载 作者:太空狗 更新时间:2023-10-29 18:12:42 25 4
gpt4 key购买 nike

我正在使用 ngPrime 组件,如果我为它们设置样式,则样式不会应用于 dashboard.component.sass 文件,但它们会在我使用全局 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,但我 fork 了一个显示颜色变化的旧 stackblitz(虽然下拉列表在示例中没有打开)

https://stackblitz.com/edit/primeng-bootstrap-ylpzwd?file=app/app.component.scss

其他解决方案

另一种解决方案是在全局样式表中设置样式。如果您的 CSS 规则比 ngPrime 默认应用的规则更具体,这将起作用

关于angular - 样式不适用于组件级别但适用于全局级别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49528262/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com