Angular Material - 如何设置 mat-horizontal-content-container padding 0答案

【问题标题】：Angular Material - how to set mat-horizontal-content-container padding 0Angular Material - 如何设置 mat-horizontal-content-container padding 0
【发布时间】：2019-05-16 22:22:02
【问题描述】：

我正在使用角度材料步进器。我需要在移动视图上设置填充 0。在开发人员控制台上，我可以通过更改 .mat-horizontal-content-container 来设置填充 0。但是当我添加.mat-horizontal-content-container{padding:0 !important;}时它不起作用@这个问题有什么解决方案吗？

【问题讨论】：

尝试使用:ng-deep .mat-horizontal-content-container{padding:0 !important;}
with :host :ng-deep ... 参见工作示例：stackblitz.com/edit/angular-material2-issue-4ufm62?file=app/…

标签： css angular angular-material angular-template angular-material-7

【解决方案1】：

你需要使用 ::ng-deep 伪选择器，见https://blog.angular-university.io/angular-host-context/#thengdeeppseudoclassselector

:host ::ng-deep .mat-horizontal-content-container {
    padding:0 !important;
}

【讨论】：

【解决方案2】：

Material 元素不是组件的 HTML 结构的一部分。

要在您的 SCSS（CSS 等）中访问它们，您可以使用 ng-deep，它是一个 shadow-piercing descendant combinator，让您可以访问不属于您的组件结构的 html 元素。

ng-deep angular doc

::ng-deep .mat-horizontal-content-container {padding:0 !important;}

但是此组合器已弃用（您可以在文档中阅读）。还有另一种方法可以实现你想要的，但它并不理想。这是使用ViewEncapsulation

@Component({
  template: 'component.html',
  selector: 'app-component-name',
  styles: 'component.style.scss',
  encapsulation: ViewEncapsulation.None
})

None 意味着 Angular 没有视图封装。 Angular 将 CSS 添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到 HTML 中基本相同。

话虽如此，目前，::ng-deep 应该是在这些情况下要走的路，直到它被 Angular 删除。因为正如文档所述：

因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 的所有 3 个）。在此之前 ::ng-deep 应该是首选，以便与工具更广泛地兼容。

【讨论】：