Question

Im使用角形材料步进器。我需要在移动设备视图上设置padding0。在开发者控制台上，我可以通过更改.mat-horizontal-content-container来设置padding 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

材料元素不是组件的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
})

无表示Angular不进行视图封装。 Angular将CSS添加到全局样式中。先前讨论的范围规则，隔离和保护不适用。这基本上与将组件的样式粘贴到HTML中相同。

话虽如此，目前::ng-deep应该是在这些情况下可以使用的方法，直到它被Angular丢弃为止。因为如文档所述：

因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。

角材料-如何设置垫水平内容容器填充0

2 个答案: