css - Angular Material - 如何设置 mat-h​​orizo​​ntal-content-container padding 0

Question

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

Answer 1

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

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

Answer 2

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

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

ng-deep 角度文档

::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 应该是首选，以便与工具更广泛地兼容。