Angular CSS имена классов вступают в противоречие с другими компонентами после создания материала

Question

Привет, я много чего прочитал о примерах стилей, например https://angular.io/guide/component-styles. И почему-то точка

Имена классов и селекторы являются локальными для компонента и не конфликтуют с классами и селекторами, используемыми в других местах приложения.

не работает для me.

У меня есть заголовочный компонент с css классом profileImage. Тогда есть также класс profileImage в моем пользовательском компоненте. Я не использую никакой пользовательской инкапсуляции для любого компонента. Но, тем не менее, теперь он глючит, потому что класс profileImage пользовательского компонента также использует класс заголовочного компонента и переопределяет только элементы, определенные в обоих. Так, например, position: absolute; наследуется, но не должно.

.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;

Это произошло после использования темы angular. Чтобы объяснить, что именно вызывает эту проблему:

Я получил component-themes.scss:

@import "./app/header/header.component";

@mixin component-themes($theme) {
  @include tile-theme($theme);
}

Это включено в мой 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);
}

И это используется в базе c styles.scss.

Как я могу предотвратить описанное поведение при использовании компонент-тем?

Следующий код для mat-menu не является плиткой. Я еще не переименовал его, потому что это копия учебника.

header-component.s css (запрошено):

@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

Вы импортируете свой "./app/header/header.component"; в component-theme.scss. Это приводит к тому, что все стили из header.component будут глобальными, потому что вы используете material-themes.scss в своем глобальном styles.scss.

Так что все стили, которые вы определили в header.component.scss, будут загружены глобально без этого компилятор angular добавляет специальные атрибуты для обеспечения инкапсуляции. Это приводит к тому, что другие компоненты с такими же классами наследуют все свойства.

UPDATE:

В исходном ответе предлагается просто удалить оператор @import header.component, но после OP добавлен заголовок .компонентной реализацией было очевидно, что этого будет недостаточно.

Чтобы решить эту проблему, лучшим решением будет заменить правило @import на правило @ use . Но поскольку эта функция в настоящее время включена только в DartSass и только начиная с версии 1.23.0, другим решением является удаление определения mixin из файла header.component.scss и его перемещение непосредственно в component-theme.scss и удаление правила @import.