覆盖 Angular 组件中的 Angular Material 样式

Question

我在 Angular 组件中使用 Material 2 <md-input-container>。我想覆盖类之一，例如.mat-input-wrapper 在 Angular Material 中定义。但我只想在该组件中进行覆盖，并且覆盖不应影响页面中的其他组件。

渲染元素的截图如下：

Answer 1

正如@Dylan 指出的那样，您必须使用 /deep/ 来更改子组件中的 CSS。这是我一直在寻找的答案：

:host /deep/ md-input-container .mat-input-wrapper

Answer 2

首选解决方案可能是在您自己的 Material 主题样式 sheet 中定义样式。不推荐使用 /deep/ (Angular V 4.3)：https://angular.io/guide/component-styles#special-selectors

您现在可以使用 ::ng-deep 作为定义自己的主题样式的替代方法 sheet。

但是，在使用 ::ng-deep 覆盖默认字体系列时，使用 ::ng-deep 会再次对 Material 图标的使用产生负面影响（因为 Material Icons 也是一个字体系列)

Answer 3

不需要用 <div class="someCssClassName"> 换行。相反，将 Angular Material 元素设置为卡片标题的样式..

<mat-card>
   <mat-card-title>
      {{title}}
   </mat-card-title>
</mat-card>

CSS:

mat-card mat-card-title {
   color: red;
}

将此应用于另一个 'child' 元素，如 <mat-card-content>

mat-card mat-card-content,
mat-card mat-card-title {
   color: red;
}

使用 VS Code，将鼠标悬停在 CSS 编辑器中将显示此 CSS 将如何呈现的详细信息。在这个例子中，<mat-card>...<mat-card-title>

当然，如果您在单个组件中多次使用该卡，则需要使用 CSS class 名称添加 class="card-style-1" 来区分元素本身，例如 <mat-card class="card-style-1".

CSS:

mat-card.card-style-1 mat-card-content,
mat-card.card-style-1 mat-card-title {
   color: red;
}

替代方法是针对不同卡片的用途创建单独的组件，并根据需要为每个组件设置样式。

Answer 4

如果您使用的是 SCSS，请尝试 ::ng-deep

::ng-deep { 
       .sample {
         // style
         color: green;
       }
    }

Answer 5

我建议的 SCSS 最简单的方法是：

编辑：仅针对特定组件覆盖默认 css 的更简单明了的方法：

打开 index.html 并为 body 分配一个独特的属性，因为我添加了 override

<body override>
 <app-root>
    <loading-screen></loading-screen>
 </app-root>
</body>

打开 style.css 并创建覆盖 css，如下所示。

[override] app-employee .mat-input-container {
// add your custom CSS properties 
// this will apply only a particular component 
}

Answer 6

::ng-deep 的问题是，它将在所有页面和所有组件上应用该样式。这意味着它是一种肮脏的方法。更好的方法是用自定义 class 包装并在 styles.scss/styles.css

中设置元素样式

示例：正如问题中所问。要覆盖 .mat-input-wrapper，请使用自定义 class 包装元素，例如：

<md-input-container class='big-input'>。然后在

styles.scss:

.big-input .mat-input-wrapper {
   height : 200px;
}

如有必要请添加 !important。

Override Angular Material style in Angular component