覆盖PrimeNG步骤组件样式

Question

我正在使用

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

在我的Angular组件中。在我组件的样式表中，我试图为p-step设置样式，但没有运气。当我直接在浏览器的开发人员工具中更改样式时，它将起作用。我什至尝试用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. 避免使用encapsulation: ViewEncapsulation.None
2. 避免使用     !important
3. 开始使用SCSS
4. 请勿在其中放入任何自定义代码     您的父母scss

Answer 2

我的建议绝不会覆盖任何第三方库的CSS。如果要覆盖任何元素的CSS属性，请首先使用您自己的类。然后添加CSS属性。使用CSS specificity规则，它将轻松覆盖CSS属性，而无需使用！important和任何其他技巧。

解决此问题的方法，我添加了自己的类 customestepper ，并覆盖了CSS属性，如下所示：

<p-steps [model]="items" class="customstepper"></p-steps>

，然后使用 styles.css

.customstepper .ui-state-highlight{
    background: #343a40;;

}
.customstepper .ui-steps .ui-steps-item.ui-state-highlight .ui-menuitem-link {
    color:#fff;
}

演示：Click to see the demo Image

Answer 3

您可以添加encapsulation: ViewEncapsulation.None并在组件CSS中进行尝试：

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

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

或删除encapsulation: ViewEncapsulation.None并将上述CSS放入全局styles.css文件中。

第一种方式DEMO。

第二种方式DEMO。

Answer 4

我这样解决了（决定不使用垂直对齐）：

body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
 background-color: #757575 !important;
}
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
 background-color: #bdbdbd !important;
}
.ui-steps:before {
 border: none !important;
}

我还需要添加

encapsulation: ViewEncapsulation.None

在我的组件中。

另一个无需添加封装即可工作的解决方案是：

:host ::ng-deep .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
  background-color: #757575 !important;
}
::ng-deep .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
  background-color: #bdbdbd !important;
}
::ng-deep .ui-steps:before {
  border: none !important;
}

不使用

!important

目前还不能正常工作。