如何在 Angular Material 2 中扩展或覆盖组件装饰器？答案

【问题标题】：How can I extend or overwrite component decorators in Angular Material 2?如何在 Angular Material 2 中扩展或覆盖组件装饰器？
【发布时间】：2017-11-28 19:59:04
【问题描述】：

我将<mat-nav-list> 嵌套在<mat-expansion-panel> 组件中。在运行时，Angular Material 2 正在创建 html，在我的具体情况下：

<div class="mat-expansion-panel-body">...</div>

这也获得了分配给它的样式。我无法像往常一样使用组件样式表覆盖这些样式。

查看源代码，我看到了：

/node_modules/@angular/material/esm2015/expansion.js

MatExpansionPanel.decorators = [
{ type: Component, args: [{styles: [".mat-expansion-panel{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);box-sizing:content-box;display:block;margin:0;transition:margin 225ms cubic-bezier(.4,0,.2,1)}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-expansion-panel-content{overflow:hidden}.mat-expansion-panel-body{margin:0 24px 16px;overflow:auto}
...

我确定这不是创建组件的确切代码，但它确实包含我想要覆盖的 css：

...
.mat-expansion-panel-body{margin:0 24px 16px;overflow:auto}
...

如何修改装饰器以移除边距？这是我的.ts 文件到目前为止的样子：

@Component({
    selector: 'my-selector',
    templateUrl: './my-selector.component.html',
    styleUrls: ['./my-selector.component.scss']
})
export class MyComponent implements OnInit, OnDestroy {...}

感谢您的任何建议！

【问题讨论】：

标签： angular-material2

【解决方案1】：

我希望我能将似乎有效的解决方案归功于我，但 here is a thread 有类似的问题。

我能够像这样删除边距：

my-template.component.html

<mat-expansion-panel *ngFor="let foo of bar" class="my-sidenav">
    <mat-expansion-panel-header>
        ...
    </mat-expansion-panel-header>
    <mat-nav-list>   
        <mat-list-item>...</mat-list-item>
    </mat-nav-list>
</mat-expansion-panel>

my-component.component.scss

/deep/ .my-sidenav {
    .mat-expansion-panel-body {
        margin: 0;
    }
}

【讨论】：