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

Question

Im using angular material stepper. I need set padding 0 on mobile view.On developer console i could set padding 0 by changing .mat-horizontal-content-container. But its not working when i add .mat-horizontal-content-container{padding:0 !important;}Is there any solution to this problem?

Answer 1

You need to use the ::ng-deep pseudo selector, see https://blog.angular-university.io/angular-host-context/#thengdeeppseudoclassselector

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

Answer 2

Material elements are not part of the HTML structure of your component.

To access them in your SCSS ( CSS etc. ) you can use ng-deep which is a shadow-piercing descendant combinator that let's you access html elements which are not part of your component structure.

ng-deep angular doc

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

BUT This combinator is deprecated ( as you can read in the docs ). THere is another way you can accomplish what you want but it's not really ideal. This is with using the 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.

That being said, for now, ::ng-deep should be the way to go in these cases until it will be dropped by Angular. Because as the doc states :

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.