在带有ng-deep的全局主题混合中使用主题颜色

Question

我使用的是在https://material.angular.io/guide/theming-your-components中指定的样式指南

我的组件有一个mat-form-field，我想在其中更改边框颜色。如果我将ng-deep样式放在component.scss文件中，它将被正确地应用，如下所示：

  :host ::ng-deep {
    mat-form-field.active-field .mat-form-field {
      &-flex {
        border: 2px solid red;
      }
    }
  }

现在，我希望保持边框颜色的动态性并依赖于主题。我在my-component-lib.heme.scss中定义了一个mixin，它从应用程序的全局主题文件中调用。我尝试将相同的样式放入到这个混入中，如下所示：

    @mixin my-component-lib-theme($theme) {
       $primary: map-get($theme, primary);

      .component-container ::ng-deep {
        mat-form-field.active-field .mat-form-field {
          &-flex {
            border: 2px solid lighten(mat-color($primary), 30);
          }
        }
      }
    }

但它不起作用。我在mixin中有一些不使用ng-deep的其他样式，这些样式工作得很好。所以，这里的问题似乎是::ng-deep在全球主题混合中的问题。我该如何解决这个问题呢？

Answer 1

::ng-deep选择器是一个特定于Angular的伪类，它告诉Angular-Compiler，下面的CSS也应该应用于子组件。这个选择器不会在浏览器中结束，因为浏览器不会知道它！

您的全局主题文件可能直接包含在html中，就像这样的<link rel="stylesheet" type="text/css" href="path/to/global/theme.css">，它对angular一无所知(即使它可能是由SASS/SCSS编译的)。这里只需使用普通的老式CSS (如果使用默认的Angular CLI，则使用SASS/SCSS )。您可以在这里简单地省略::ng-deep选择器，因为您的全局主题无论如何都是全局应用的。