材料角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;
}