Перезаписать пошаговый компонент PrimeNG

Question

Я использую

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

в моем угловом компоненте.В таблице стилей моего компонента я безуспешно пытаюсь оформить 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 он будет легко переопределять свойства CSS без использования! Важное и любого другого взлома.

Что я сделал, чтобы решить эту проблему, я добавил свой собственный класс customestepper и переопределил свойства CSS, как показано ниже:

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

, а затем в стилях.css

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

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

Демо: Нажмите, чтобы увидеть демо Изображение

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 файл.

первый путь ДЕМО .

второй путь ДЕМО .