材料角4的擴展面板

Question

我有一個 Angular 4.4.4 應用程序， material 2.0.0-beta.12 ，我想使用材料設計中的mat-expansion-panel 。

這是我的代碼：

           <mat-expansion-panel class="parametersPanel">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            PARAMETERS
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <table style="width:100%">
                        <tbody>
                            <tr class="parameterListItem">
                                <td class="icon"><img src="assets/images/alert.png"></td>
                                <td class="parameterName">Parameter 1</td>
                                <td class="parameterValue">Value</td>
                                <td class="unit">unit</td>
                            </tr>                        
                        </tbody>
                    </table>
            </mat-expansion-panel>

所以它工作得很好，但可以從瀏覽器邊距中刪除mat-expansion-panel-body中的margin: 0 24px 16px; ?

Answer 1

在您的style.css或您的組件樣式中，您需要添加以下 css：

/deep/ .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}

這是由於視圖封裝。 您可以在此處閱讀有關此內容的更多信息： https ://angular.io/guide/component-styles

更新：

使用/deep/ ， ::ng-deep來修改材質組件的樣式已被棄用。 請參閱此鏈接。

但是，使用@angular/core ^6.1.0和@angular/material ^6.4.6我能夠更改 Angular Material 擴展面板的樣式，而無需添加任何特定內容。 看來您現在可以簡單地更改組件 css 文件中的樣式。 所以這應該工作：

.mat-expansion-panel-body {
    padding: 0;
}

您可以在此處閱讀有關棄用/deep/和::ng-deep 的更多信息。

Answer 2

這 100% 有效。

在你的 style.css 中添加這個：

.mat-expansion-panel-content > .mat-expansion-panel-body {
  padding: 0 !important;
}

Answer 3

你應該使用::ng-deep而不是/deep/ ，它是 angular 提供的別名。 已經從 chrome 瀏覽器中刪除了對/deep/等的支持。 所以在你的例子中，這將是：

::ng-deep .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}

Answer 4

這個對我有用

::ng-deep .mat-expansion-panel-body {
    padding: 0px 0px 0px 0px; 
}

我希望這對你有用

Answer 5

::ng-deep .mat-expansion-panel-body {
    padding: 0 !important;
}

Answer 6

如果您將它添加到主要的 styles.scss 它可以工作（不是在組件樣式級別）

.mat-expansion-panel-body {
    padding: 0;
}

Answer 7

下面的代碼將在添加到您的組件 css 文件時起作用

:host {
  ::ng-deep {
    .mat-expansion-panel-spacing {
      margin: 0px 0 !important;
    }
  }
}

Answer 8

最簡單和最安全的方法是將其包含在您的項目全局 style.scss

app-instruction mat-expansion-panel.trigger-panel {
.mat-expansion-panel-body {
    padding:0;
}

}

• app-instruction => component.ts 文件中的組件選擇器。
• mat-expansion-panel => mat-expansion-panel 的選擇器。
• .trigger-panel => 是我在 mat-expansion-panel 中包含的一個 css 類，用於在 component.html 文件中僅選擇這個類。

Answer 9

這段代碼幫助了我。

.mat-expansion-panel-header {
   padding: 0px 16px;
}

Answer 10

對於@angular/material 版本 +10

您需要將encapsulation: ViewEncapsulation.None屬性添加到您的 @Component 裝飾器中

@Component({
  selector: '...',
  ...
  encapsulation: ViewEncapsulation.None
})
export class myApp{}

然后這將工作

.mat-expansion-panel-body {
  padding: 0 !important;
}

請注意， ::ng-deep 和 /deep/ 不會像 @nicholaschris 所說的那樣在新版本的 angular/material 上工作

Answer 11

您可以輕松刪除父填充。

<div class="removePadding">
   <mat-list-item *ngFor="let item of item.children" class="testingSmall">
      <h3 matLine>{{item.label}}</h3>
   </mat-list-item>
</div>

.removePadding{
   margin: 0 -24px -16px;
}