css - 覆盖 PrimeNG 步骤组件样式

Question

我在用

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

在我的 Angular 组件中。在我的组件的样式表中，我试图设置 p 步骤的样式，但没有运气。当我直接在浏览器的开发人员工具中更改样式时，它可以工作。我什至尝试用 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

在我的组件中。

标签： cssangularprimeng

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. 避免encapsulation: ViewEncapsulation.None
2. 避免使用 !important
3. 开始使用 SCSS
4. 不要在你的父 scss 中放置任何自定义代码