mat-card，如何更改默认填充答案

【问题标题】：mat-card, how to change default paddingmat-card，如何更改默认填充
【发布时间】：2019-01-01 14:59:33
【问题描述】：

我想更改 Angular 材质 mat-card 上的全局默认填充。

在 angular.json 我有这个规范：

 "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",           
          "src/styles/app.theme.scss",
          "src/styles/styles.scss"
        ],

我在styles.scss中进行调整

.mat-card {
    margin: 5px;
    padding: 5px;}

结果是边距有效，而填充无效。这是 devtools 中的结果。我看到<style> 中有一个 .mat-card 优先。

如何在mat-card 上全局设置填充？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您必须确定它们的范围。 Angular 将首先采用自己组件的 css。因此，如果您想使用任何类名（例如“custom”）更改全局范围。

<mat-card class="custom"></mat-card>

在样式表中

.custom.mat-card{
  //your styles
 }

了解更多，请参考angular material customizing

【讨论】：

虽然这是一种很好的方法，而且我提倡这种方法 - 您实际上可以全局覆盖全局范围内的材质类（styles.scss 或 angular.json 中的其他配置样式文件）。您只需要注意选择器的具体程度。这对于将encapsulation 设置为ViewEncapsulation.None 的任何组件都是相同的。
是的。设置 ViewEncapsulation.None 时需要小心
这行得通！但是，如果我遵循 BEM 命名方法并使用它不起作用。为什么？

【解决方案2】：

dotless: .mat-card --> mat-card

mat-card { margin: 5px; padding: 5px;}

【讨论】：