Question

我在<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 {...}

感谢您的任何建议！

Answer 1

我希望我能为这个似乎有效的解决方案而感到荣幸，但here is a thread也有类似的问题。

我能够删除这样的边距：

我-template.component.html

Not Set

我-component.component.scss

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

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

1 个答案: