Angular CSS class names collide with other components after Material Theming - css

Question

Hey there I've read many things about the style scopes for example https://angular.io/guide/component-styles. And somehow the point
Class names and selectors are local to the component and don't collide
with classes and selectors used elsewhere in the application.
does not work for me.
I have a header-component with the css class profileImage. Then there's also the class profileImage in my user-component. I'm not using any custom encapsulation for any component. But still it's buggy now because the class profileImage of the user-component also uses the one of the header-component and only overrides the elements defined in both. So for example position: absolute; gets inherited but it should not.
.profileImage[_ngcontent-bkm-c17] { //user-component
max-width: 34px;
max-height: 34px;
width: auto;
height: auto;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.profileImage { //header-component
border-radius: 50%;
position: absolute;
max-width: 54px;
max-height: 54px;
width: auto;
height: auto;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
This happend after using angular theming. To explain what exactly is forcing this problem:
I got a component-themes.scss:
#import "./app/header/header.component";
#mixin component-themes($theme) {
#include tile-theme($theme);
}
It's included in my material-themes.scss:
#include angular-material-theme($theme);
#include component-themes($theme);
.dark-theme {
color: $light-primary-text;
$dark-primary: mat-palette($mat-grey, 700, 300, 900);
$dark-accent: mat-palette($mat-blue-grey, 400);
$dark-warn: mat-palette($mat-red, 500);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
#include angular-material-theme($dark-theme);
#include component-themes($dark-theme);
}
And this is used in the basic styles.scss.
How can I prevent the described behavior while using component-themes?
The following code is for a mat-menu not a tile. I haven't renamed it yet because it's a copy of a tutorial.
header-component.scss (requested):
#import "~#angular/material/theming";
#mixin tile-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$background-color: mat-color($background, card);
.tile {
background-color: mat-color($primary);
}
}
.toolbar-spacer {
flex: 1 1 auto;
}
// verantwortlich für das Layout der Toolbar
.startpage:hover {
opacity: 0.6;
}
.mat-toolbar {
height: 7vh;
}
div {
overflow: inherit;
}
.language-buttons {
padding: 0 25px;
margin-right: 32px;
}
.language-buttons-login {
padding: 0 20px;
}
.navigate-buttons {
padding: 0 12px;
}
.mat-fab.mat-accent {
background: #3f51b5;
}
::ng-deep .mat-menu-panel {
position: relative;
top: 5px;
right: -16px;
}
.mat-button,
.mat-flat-button,
.mat-icon-button,
.mat-stroked-button {
min-width: 1px;
}
.imageContainer {
width: 54px;
height: 54px;
right: 20px;
position: absolute;
}
.profileImage {
border-radius: 50%;
position: absolute;
max-width: 54px;
max-height: 54px;
width: auto;
height: auto;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.font-awesome {
margin-right: 19px;
}
// ::ng-deep .accent-tooltip {
// background-color: mat-color($accentPalette);
// }

Answer 1

You are importing your "./app/header/header.component"; inside the component-theme.scss. This leads to the result that all styles from header.component will be global, because you are using the material-themes.scss in your global styles.scss.
So all styles you defined in header.component.scss will be loaded global, without that the angular compiler adds special attributes to ensure encapsulation. This leads to the result that other components, with the same classes will inherit all properties.
UPDATE:
Original answer proposed to simply remove the #import header.component statement, but after OP added the header.component implementation it was obvious that this would not be sufficient.
To solve this the best solution would be to replace the #import rule with the #use rule. But as this feature is currently only included in DartSass and only since version 1.23.0, another solution is to remove the mixin definition from the header.component.scss file and move it directly to the component-theme.scss, and remove the #import rule.