Question

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

以下是渲染元素的屏幕截图：

Answer 1

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

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

Answer 2

没有必要用<div class="someCssClassName">包裹。相反，要设置Angular Material元素的样式，如卡片的标题..

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

CSS：

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

将这个应用于另一个孩子＆＃39;像<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="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 3

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

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

Answer 4

::ng-deep 的问题在于，它会将样式应用于所有页面和所有组件。这意味着它是一种肮脏的方法。执行此操作的更好方法是使用自定义类包装并设置 styles.scss/styles.css

中的元素样式

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

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

styles.scss：

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

如有必要，添加 !important。

Answer 5

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

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

但是，使用:: ng-deep在使用材质图标覆盖默认字体系列时会再次影响使用材质图标（因为材质图标也是字体系列）

Answer 6

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

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

打开index.html并为body分配一个唯一的属性，就像我添加的override

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