材料角4的扩展面板答案

【问题标题】：Expansion-panel from material angular 4材料角4的扩展面板
【发布时间】：2018-03-23 04:32:58
【问题描述】：

我有一个带有 material 2.0.0-beta.12 的 Angular 4.4.4 应用程序，我想使用 Material Design 中的 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>

所以它工作得很好，但可以从浏览器margin: 0 24px 16px; 中删除mat-expansion-panel-body 中的边距？

【问题讨论】：

标签： angular material-design angular-material

【解决方案1】：

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

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

这是由于视图封装。您可以在此处阅读更多相关信息：https://angular.io/guide/component-styles

更新：

不推荐使用/deep/、::ng-deep 来修改材质组件的样式。看到这个link。

但是，使用 @angular/core ^6.1.0 和 @angular/material ^6.4.6 我能够更改 Angular Material 扩展面板的样式，而无需添加任何特定内容。看来您现在可以简单地更改组件 css 文件中的样式。所以这应该有效：

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

您可以在此处阅读有关弃用 /deep/、::ng-deep here 的更多信息。

【讨论】：

感谢您的回答，但它不起作用。我在面板正文中还有边距。
我在组件和app.component.css 中添加了它的css 文件，即使使用!important，两者都不起作用。
此解决方案（使用 :ng-deep、/deep/ 和 >>>）将被弃用和删除。除了这些，我们还有什么解决方案？
@Burnee - 我在 ::ngdeep 上阅读了一篇博客，上面说 Angular 团队正在使用它，直到找到替代品，此时他们将不得不自己寻找解决方法。这是我找到的最佳答案，因此将使用 ngdeep，直到他们另有说明。
.mat-expansion-panel-body 不在您的组件中，您在组件中定义的样式仅在关闭组件的视图封装时适用。否则放到一个全局样式文件中，而不是放在一个组件中。

【解决方案2】：

您应该使用 ::ng-deep 而不是 /deep/，这是 angular 提供的别名。已从 chrome 浏览器中删除对 /deep/ 等的支持。所以在你的例子中，这将是：

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

【讨论】：

这个在组件内部对我有用。只需添加“！important;”

【解决方案3】：

您可以轻松删除父填充。

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

【讨论】：

有趣的解决方法，但如果你经常这样做，这种事情很容易成为维护的噩梦。我永远不会接受它作为这个问题的合法答案，但它可以用作绝望的最后手段

【解决方案4】：

这个对我有用

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

}

希望对你有用

【讨论】：

为我工作@angular/material 8.1.4
它可以工作，但是从现在开始，该组件中的每个子组件都将采用类似的样式，这是不需要的
这适用于更具体的选择：::ng-deep .your-panel-class > .mat-expansion-panel-content > .mat-expansion-panel-body { padding: 0 !important; }

【解决方案5】：

这 100% 有效。

在你的 style.css 中添加这个：

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

【讨论】：

.mat-expansion-panel-content > .mat-expansion-panel-body { padding: 0; } 在 Angular 项目的主要 styles.css 中，没有 important! 效果很好:) 谢谢

【解决方案6】：

如果你将它添加到 main styles.scss 中它可以工作（不是在组件样式级别）

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

以下代码在添加到您的组件 css 文件时将起作用

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

【讨论】：

:host 是做什么的？

【解决方案9】：

对于@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 上工作

【讨论】：

【解决方案10】：

最简单和最安全的方法是将其包含在您的项目全局 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 文件中仅选择这个。

【讨论】：