Estoy escribiendo un componente (no importa si está desarrollado con Vue o Angular, porque todos tienen el concepto de estilos con ámbito. - vue - Angular ). Y llamémoslo foobar .

Debido a los estilos de alcance, un estilo .specific en realidad es .specific[foobar-component-id-which-is-generated-randomly] , por lo que no nos preocupamos de que los estilos para foobar afecten a otros componentes o elementos de otras páginas sin querer.

No quiero renunciar al beneficio.

Sin embargo, uso muchos componentes proporcionados por una biblioteca de interfaz de usuario, por ejemplo, mat-select Angular-Material .

Aunque mat-select proporciona una forma de agregarle una clase de estilo, por ejemplo, puedo agregarle una clase de estilo specific mediante <mat-select [panelClass="specific"] .

Sin embargo, escribir .specific {width: 500px} en foobar.css no surtirá efecto. Debido a que el elemento generado desde mat-select que finalmente se cargó en la página (no sé por qué), no tiene la propiedad foobar-component-id-which-is-generated-randomly .

¿Hay alguna solución bajo la condición de no usar estilos globales y solo cambiar algunos estilos de componentes específicos (no todos en mi componente de escritura)?

Muchas gracias.