覆盖 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

在我的组件中。

Answer 1

我的建议永远不会覆盖任何第三方库的 CSS。如果你想覆盖任何元素的 CSS 属性，首先使用你自己的类。然后添加 CSS 属性。使用CSS specificity 的规则，它将轻松覆盖 CSS 属性，而无需使用 !important 和任何其他 hack。

我做了什么来解决这个问题，我添加了自己的类 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 2

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

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

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

目前还不行。

Answer 4

您可以添加 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。