Question

我有两个带有选项卡组的组件。一个是主页，我已经覆盖了CSS以使标签变大，这是使用ViewEncapsulation.None完成的。另一个是对话框，我希望将其保持较小，但仍要对其应用其他自定义样式。

当我访问其他选项卡页面后打开对话框时，它会复制所有样式，我认为这是因为ViewEncapsulation。没有出血CSS，但不完全符合预期。

总有一种方法可以覆盖Angular Material样式而不更改ViewEncapsulation，以便可以将两个组件分开吗？

Answer 1

如果您想自定义Angular材质组件并提供自己的样式，我有以下建议。您可以使用其中之一。

1）覆盖您主要的style.css（或style.scss，无论使用哪种）上的类。如果您想知道，它是与index.html，main.ts，package.json等位于同一目录级别的目录。您可能需要添加！important声明。

例如

.mat-form-field-label {
  color:blue!important;
}

2）通过提供自定义类来自定义各种Angular Material指令（例如MatPlaceholder）。

例如，当我们使用MatPlaceHolder并在component.html模板上

<mat-placeholder class="placeholder">Search</mat-placeholder>

然后在您的component.css上，我们可以将CSS属性提供给placehodler类

.placeholder {
  color: green
}

注意：另外，您可以使用:: ng-deep，但我强烈建议您使用:: ng-deep，因为它将很快被弃用。

::ng-deep .mat-dialog {
  /* styles here */
  /* try not to use ::ng-deep */
}

Answer 2

您可以使用:: ng-deep。请参阅NgDeep

Answer 3

解决方案1：您可以将组件的所有元素放入带有CSS类的父元素中，并在其中覆盖材质样式。（这是自定义封装）

注意：此处没有ViewEncapsulation。

component.html

<div class="my-component__container">
    <!-- other elements(material) are here -->
</div>

component.scss

.my-component__container{
    // override material styles here
    .mat-form-field{...}
}

解决方案2：使用/deep/。（deprecated）

:host /deep/ .mat-form-field {
  text-align: left !important;
}