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

Question

我正在使用 angular material 步进器。我需要在移动 view.On 开发者控制台上设置填充 0 我可以通过更改 .mat-horizontal-content-container 来设置填充 0。但是当我添加 .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-deep，这是一个 shadow-piercing descendant combinator，让您可以访问 html不属于您的组件结构的元素。

ng-deep angular doc

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

BUT 此组合器 已弃用 （如您在文档中所见）。还有另一种方法可以完成你想要的，但它并不理想。这是使用 ViewEncapsulation

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

None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

话虽这么说，但目前 ::ng-deep 应该是这些情况下的方法，直到它被 Angular 删除。因为正如文档所述：

As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

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

Angular Material - how to set mat-horizontal-content-container padding 0

css

angular-template