Css 覆盖涂底漆步骤组件样式

我正在使用

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

但它没有起作用。我希望步骤垂直对齐，我不希望边框，我希望步骤编号为浅灰色，所选步骤编号为浅灰色。我想要的是以下内容：

: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

---

在我的组件中。

您可以添加

封装：视图封装。无
并在您的组件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;
}

或者删除
enclosuration:viewenclosuration.None
并将上面的css放在全局
styles.css
文件中

第一条路

第二种方法。
这是解决方案。您缺少一个
：：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;
}


避免
封装：查看封装。无

避免使用
！重要信息
开始使用SCS
不要将任何自定义代码放入
你的父母scss
我这样解决了它（决定不使用垂直对齐）：

我还需要添加

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

到目前为止，它还不起作用。
我的建议永远不会覆盖任何第三方库的CSS。如果您想覆盖任何元素的CSS属性，请首先使用您自己的类。然后添加CSS属性。有了这样的规则，它就可以轻松地覆盖CSS属性，而无需使用！重要的和任何其他黑客

为了解决这个问题，我添加了自己的类Customesteper，并覆盖了CSS属性，如下所示：

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

演示：
让我看看，试着处理你的问题。我基于打底创建定制组件。我很惊讶ng deep没有起作用。仅供参考，删除视图封装线。使用它不是一种好的做法。你测试过我的答案了吗？如果答案是肯定的，并且有效，请投票并将其标记为正确答案。嗨，thanx，我会测试它并让你知道。然而，我通过稍微更改@fatemefazli的答案来实现它。使用
封装：ViewEncapsulation不是一个好的实践。无
也将其放在全局css中不是一个好的实践。然后你会建议@PatricioVargas做什么？我测试了你的解决方案，但它不起作用。它只是采用了标准样式，就好像我甚至没有任何带有我自己样式的scss文件一样。@YourReflection我添加了一张图片。应该是这样的吗？你是在stackblitz上测试的还是在你的环境中测试的我的解决方案？是的，它看起来像这样，没有运行按钮。后来我在我的组件中测试了你的样式，但它不起作用。很高兴你找到了答案。顺便说一句，你不需要：主持人，你也应该避免！尽可能的重要。这将使您的代码更加简单mantainable@PatricioVargas：我尝试不使用：主机和！重要的。不幸的是，它不起作用，所以我把它放在了：/ughh中。我希望我能帮助更多的人，而不是x@DirtyMind，但是我必须使用“封装：视图封装。无”。否则就不行了。这是使用“！important”的更好解决方案吗？对于以其他颜色高亮显示所选步骤，它仍然不起作用。它只有在我使用时才起作用！重要的是使用自己的类是覆盖CSS的正确方法。我不认为使用：host:：ng deep覆盖CSS是一个好方法。@YourReflection是的，如果没有任何效果，那么我们可以继续！重要的。
!important

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

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

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