材料角4的扩展面板

Question

我有一个棱角分明的4.4.4应用程序,material 2.0.0-beta.12我想使用mat-expansion-panelfrom材料设计.

这是我的代码:

           <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

而不是/deep/你应该使用::ng-deep,这是由角度提供的别名./deep/已从Chrome浏览器中删除对等的支持.所以在你的例子中:

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

Answer 2

在您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的Expansion面板的样式而不必添加任何特定的东西.您现在可以简单地更改组件css文件中的样式.所以这应该工作:

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

你可以在这里阅读有关的折旧的详细信息/deep/,::ng-deep 在这里.

Answer 3

这有效100％。

将此添加到您的style.css中：

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

Answer 4

这个为我工作

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

}

希望对您有用

Answer 5

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