Unable to change angular2-smart-table header color globally through out application

[suganyaVijayaramu]

I am trying to change the table header/title color. I used ng2-smart-table before. since we upgrade Angular version to 18 ng2 not supported by Angular latest version. So we moved to angular2-smart-table. And modified style.css from ng2 to angular2. We are trying to apply background image to the title section, but not applied

style.css:

angular2-smart-table > table > thead > tr.angular2-smart-titles {
    background-image: linear-gradient(to right bottom, #da291c, #d43c30, #cd4b41, #c45750, #b9635e);
    th {
        word-break: break-all;
        padding: 0.875rem 0.25rem !important;
    }
    th.angular2-smart-th > angular2-st-column-title > div > angular2-smart-table-title > a,span {
        color: #fff !important;
        text-decoration: none;
        font-size: 12px;
        font-family: Roboto, sans-serif;
    }
    th.angular2-smart-th > angular2-st-column-title > div > angular2-smart-table-title > a:hover {
        color: #fff !important;
    }
    th.angular2-smart-actions {
        color: #fff !important;
    }
    th.angular2-smart-th > angular2-st-column-title > div > angular2-smart-table-title > a.sort::after {
        color: #fff !important;
    }
    th.angular2-smart-th > angular2-st-column-title > div > angular2-smart-table-title > a.sort.asc::after,a.sort.desc::after {
        color: #fff !important;
        border-bottom-color: #fff !important;
    }
}

html:

<div class="row" style="margin-bottom:10px">
    <div style="margin-left: 12px;padding: 0px;" class="col-lg-12">
        <angular2-smart-table style="font-size:15px" [source]="source" (click)="setSortData()" [settings]="settings"
        (userRowSelect)="onRowSelect($event)"></angular2-smart-table>
    </div>
</div>

[suganyaVijayaramu]

Please help to resolve this issue

[uap-universe]

Can you please try if it helps to write

tr.angular2-smart-titles {
    background-image: linear-gradient(to right bottom, #da291c, #d43c30, #cd4b41, #c45750, #b9635e);
    // ..
}

instead of

angular2-smart-table > table > thead > tr.angular2-smart-titles { // ...

?