gpt4 book ai didi

css - 覆盖 PrimeNG 步骤组件样式

转载 作者:行者123 更新时间:2023-12-02 14:57:28 27 4
gpt4 key购买 nike

我正在使用

<p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>

在我的 Angular 组件中。在我的组件的样式表中,我试图设置 p-steps 的样式,但没有成功。当我直接在浏览器的开发人员工具中更改样式时,它起作用了。我什至试图用 Angular 的

覆盖样式
:host ::ng-deep

但是没有用。我希望步骤垂直对齐,我不想要边框,我希望步骤编号为浅灰色,所选步骤编号为浅灰色。我想要的是以下内容:

:host ::ng-deep .ui-widget, .ui-widget * {
float: none !important;
}

:host ::ng-deep .ui-steps {
border: none !important;
}

:host ::ng-deep .ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}

:host ::ng-deep body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: #bdbdbd !important;
}

我也设置了

encapsulation: ViewEncapsulation.None

在我的组件中。

最佳答案

这是解决方案。你错过了一个 ::ng-deep

::ng-deep .ui-widget, ::ng-deep.ui-widget * {
float: none !important;
color: red;
}
.ui-steps {
color: red;
border: none;
}
.ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575;
}

.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: red;
}

https://stackblitz.com/edit/primeng-template-jr2vaa

  1. 避免封装:ViewEncapsulation.None
  2. 避免使用 !重要
  3. 开始使用 SCSS
  4. 不要放入任何自定义代码 你的 parent scss

enter image description here

关于css - 覆盖 PrimeNG 步骤组件样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52277048/

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