Imagine there is a SCSS mixin inside Angular component's my.component.scss file.
Now I am importing that file in Angular app's global style.scss because I would like to pass some data to that mixin.
For example: my-component.scss.
<pre>
@mixin my-component-theming($theme) {
// Extract whichever individual palettes you need from the theme.
$warn-palette: map-get($theme, warn);
$warn: mat-color($primary-palette);
.error-message {
color: $warn !important;
}
}
</pre>
my-component.ts
<pre>
@Component({
selector: 'my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.scss']
})
</pre>
Angular application's styles.scss. (This gets imported in Angular.json)
<pre>
@import '~@angular/material/theming';
@import 'my-component.scss';
// just imagine that $app-theme is already defined here.
// Not including unnecessary code to keep example simple.
@include my-component-theming($app-theme)
</pre>
It does compile and application work as expected but my "error-message" css class is accessible by whole app.
Angular should have encapsulated "error-message" css class and it's visibility should be limited to my-component only. How can I keep the encapsulation working in this case?
PS: I am just trying to accomplish this: https://material.angular.io/guide/theming#theming-only-certain-components but this issue appears to be more in general.
Thanks in advance. Let me know if further clarification or code is needed.