Angular primeng tabview style defined in one component is affecting the style in another component

Question

I am not an expert with styling and encapsulation.

Need help with fixing style issue. Style used in a component is overriding the global style. i am using primeng tabview component in component A for eg:

ComponentA.html:

<p-tabView styleClass="tab-view"></p-tabview>

ComponentA.scss:

.p-tabview {
    padding: 0rem;

    li.p-highlight span {
        font-weight: $semibold-font-weight;
    }
}

But this padding is applied to all primeng tabview setting in global style

Component B:

<p-tabView class="tab-view-scheduler"></p-tabview>

global style scss:

.p-tabview {
    @media screen and (min-width: $tablet-break) {
        padding: 0 4rem 2rem; //this is getting overridden
        font-size: $desktop-small-font-size;
    }
}