css - 覆盖 PrimeNG 步骤组件样式

Question

我正在使用

<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

在我的组件中。

Answer 1

这是解决方案。你错过了一个 ::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