css - Angular:如何更改 Material 主题并保留一些自定义 CSS？

Question

我希望用户能够登录到我们的应用程序，将 Material 主题更改为他们公司的颜色，同时在这些 Material 组件上保留一些自定义 CSS。

我有一个元素正在进行中，我们希望在用户/他们的公司登录时更改 Material 主题。
我的问题是，当应用程序加载时，它会加载全局样式和 Material 主题，一切看起来都很好。但是在登录时——当我改变 Material 主题时——新主题似乎覆盖了我们添加到 Material 组件中的一些自定义 CSS(比如垫子表中垫子行的背景颜色)。我不知道如何保留我的自定义 CSS 或保留 Material 主题以覆盖它。现在我正在处理一个被覆盖的类，但一旦找到解决方案，我将扩展到其他所有类。
我试过:
- 将自定义类拉入延迟加载的样式表，在主题更改后立即加载。
- 将::ng-deep 添加到 styles.scss 中的类。
- 将::ng-deep 添加到延迟加载样式表中的类。

样式.scss

.matRowDefault {
    margin-bottom: .8rem;
    background: white;
    border-radius: 5px;
    height: 50px;
    border-left: 7px solid gray;
}

主题.scss

$dpa-primary: mat-palette($mat-deep-purple);
$dpa-accent: mat-palette($mat-amber);
$dpa-warn: mat-palette($mat-basicRed);

$dpa-theme: mat-light-theme($dpa-primary, $dpa-accent, $dpa-warn);
.dpa-theme {
    @include angular-material-theme($dpa-theme);
}

组件.html

<mat-row class="matRowDefault" (mouseenter)="selectRow(row)" (mouseleave)='selectedRow = ""'>
</mat-row>

应用程序组件.ts

  setTheme(theme) {
    if (theme.toLowerCase() != "default-theme") {
      this.overlayContainer.getContainerElement().classList.add(theme);
      this.componentCssClass = theme;

      var customUrl = '../assets/customColors2.css';
      this._srv.loadExternalStyles(customUrl);
    }
  }

beta.service.ts

  loadExternalStyles(styleUrl: string) {
    return new Promise((resolve, reject) => {
      const styleElement = document.createElement('link');
      styleElement.rel = 'stylesheet';
      styleElement.href = styleUrl;
      styleElement.onload = resolve;
      document.head.appendChild(styleElement);
    });
  }

使用上面的单一样式类，组件样式覆盖边框(这很好)，新主题覆盖背景为背景:继承使行与表格颜色相同(不是我想要的)，并且然后我可以看到 styles.scss 中的其余样式仍然存在。
所以一切正常，我只需要一个聪明的方法来防止主题覆盖我已经存在的任何自定义 CSS。

Answer 1

我认为您正在寻找的解决方案是 Angular 的 ViewEncapsulation 属性。有 4 个选项:Emulated、Native、None 和 ShadowDom。

参见此处:https://angular.io/api/core/ViewEncapsulation和 https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

我认为您正在寻找的修复方法是在每个要使用自定义 CSS 的组件中使用 ViewEncapsulation.Native。从本质上讲，它将允许您不将全局样式应用于该特定组件。

组件.ts

@Component({
  encapsulation: ViewEncapsulation.Native,
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})