각도 재료 2의 부품 장식을 어떻게 확장하거나 덮어 쓸 수 있습니까?

Question

<mat-expansion-panel> 구성 요소 안에 <mat-nav-list>을 중첩합니다. 런타임에 각도 재료 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

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

내-component.component.scss

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