Here's the solution. You were missing a `::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. Avoid `encapsulation: ViewEncapsulation.None`
2. Avoid using
`!important`
3. Start using SCSS
4. Don't put any custom code in
your parent scss
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/u73jO.png
you can add ```encapsulation: ViewEncapsulation.None``` and try this in your component 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;
}
or delete the ```encapsulation: ViewEncapsulation.None``` and put the above css in your global `styles.css` file.
first way [DEMO](https://stackblitz.com/edit/primeng-template-fjhqzr).
second way [DEMO](https://stackblitz.com/edit/primeng-template-riz8vl).
