Issue
I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent any conflicts or unintentional styling of other parts of the application due to specificity issues.
Solution Proposal
To address this, we aim to isolate and scope the styles to only apply within the <my-app></my-app> tag by automatically prefixing all selectors.
The newly generated styles should follow this format:
my-app .mat-button {}
Current Approach
Our current approach involves including the necessary styles where needed, as shown below:
styles.scss
@import "~@angular/material/theming";
my-app {
@include mat-core();
@import "~@angular/material/prebuilt-themes/deeppurple-amber";
}
However, one limitation of this solution is that the scoping does not apply uniformly to all classes.
Demonstration/Example
I have created a demo on StackBlitz as a showcase.
You can observe the issue in the following screenshot:
https://i.sstatic.net/FwTqq.png
Are there alternative methods to achieving isolated/scoped angular material styles?