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

这是解决方案。你错过了一个::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和任何其他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;
}

但是：z zxswくくzxswい

Answer 3

你可以添加Click to see the demo并在你的组件css中尝试这个：

Image

或者删除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。

第二种方式styles.css。

Answer 4

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

DEMO

我还需要添加

DEMO

在我的组件中。

另一种无需添加封装即可使用的解决方案是：

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

它到目前为止还不起作用。