I'am writing a component (It doesn't matter whether it is developed with Vue or Angular, because they all have the concept of scoped styles. - vue - Angular ). And let us call it foobar.

Because of scoped styles, a .specific style actually is .specific[foobar-component-id-which-is-generated-randomly], so we don't worry styles for foobar will affect other components or elements of other pages unintentionally.

I don't want to give up the benefit.

However, I use many components provieded by a UI libary, for example, Angular-Material's mat-select.

Although mat-select provide a way to add a style class to it, for example, I can add a specific style class to it by <mat-select [panelClass="specific"].

However, write .specific {width: 500px} in foobar.css will not take effect. Because the element generated from mat-select which finally loaded in the page, (I don't know why), dones't have the property foobar-component-id-which-is-generated-randomly.

Is there any solution under the condition of not using global styles and only changing some specific (not all in my writing component) components' styles?

Thanks a lot.