如何用附加CSS扩展Angular组件而不污染全局CSS？

Question

假设我在我的应用中使用的是MatButton中的https://github.com/angular/components，但是我想在整个应用中覆盖其某些样式。假设这些样式替代项相当大……假设需要几百行CSS。

一种方法是在我的应用程序的全局CSS中包括这些样式替代项。但是，我不希望这样做……因为如果我的应用程序的特定页面没有插入MatButton，它仍然会插入我的数百行CSS。这对最终用户不利，因为它会减慢页面加载速度。

我很想以某种方式在MatButton周围创建一个包装器，并让该包装器做除了应用这些其他样式之外，别无其他。也就是说，如下所示：

import {MatButtonModule} from '@angular/material/button';

// Somehow apply additional styles here...?
@NgModule({
  exports: [MatButtonModule],
})
export class ButtonModule {
}

是否有可能这样做，或者有更好的方法吗？谢谢-

编辑：

潜在的骇客手段：https://stackblitz.com/edit/angular-zaomxj?file=src/app/mat-button-styles-module.ts

[基本上在上面的Stackblitz中发生的是，我正在ButtonModule周围创建一个名为MatButtonModule的包装器模块。 ButtonModule还导出名为MatButtonStylesModule的模块。该模块声明一个指令，该指令选择[mat-button]并将附加样式附加到以document.head为目标的MatButton。

然后，我的应用程序的用户只需导入ButtonModule而不是MatButtonModule。

Answer 1

您可以尝试使用ng-deep覆盖其中一个类别。这里是一个例子：

::ng-deep .mat-class-to-override {
    color: #22B14C;
}

在使用角形材质组件的组件的css类中使用它