Style backgroundColor p-fileUpload primeNG

Question

I work with a application angular 4 and p-fileUpload component.

I want to change the background-color of component and the color of label text.

I try to change the style in a css file but it doesn't work

.ui-button.ui-fileupload-choose.ui-widget.ui-state-default.ui-corner-all.ui-button-text-icon-left{
 background-color: #3F51B5 !important;
    border: 3px solid #3F51B5 !important;
    color: #d30e0e !important;
}

However the generated code in html is:

<span class="ui-button ui-fileupload-choose ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" ng-reflect-klass="ui-button ui-fileupload-choose" ng-reflect-ng-class="[object Object]">
            <span class="ui-button-icon-left fa fa-plus" ng-reflect-klass="ui-button-icon-left fa" ng-reflect-ng-class="[object Object]"></span>

What the problem ? Is it possible ?

Thanks a lot

checkout this post: https://stackoverflow.com/questions/46280708/override-primeng-css-classes-in-angular/46280815#46280815 — Vega, Oct 17 '17 at 14:54
Also, this one, although you are not using for AM, it's the same solutions :) : https://stackoverflow.com/a/46770809/5468463 — Vega, Oct 17 '17 at 18:58

score 2 · Accepted Answer · answered Oct 17 '17 at 13:32

2

Consider adding the CSS you want to overwrite in the global styles.css file located in the root of your project instead of the component CSS file.

answered Oct 17 '17 at 13:32

Hamed Baatour

6,664
3
35
47

it works. But isn't it against the Angular's componentization principle? – Toolkit Jan 19 '19 at 09:58

Style backgroundColor p-fileUpload primeNG

1 Answers1