How do I prevent Angular component styling override from carrying over to other components?

Question

I have a couple Angular components that route back and forth to one another. They both have mat-form-field 's. In one component, I am overriding the styling of the underline component like so:

::ng-deep .mat-input-underline {
  display: none;
}

When I click on the link to go back to the other component, the styling as defined as above carries over and the underline components are gone. I tried to add styling like:

::ng-deep .mat-input-underline {
  display: revert;
  //or
  display: unset;
  //or
  display: initial;
}

But none of them work. How can I override the material design styling on just one component but not the others?

Answer 1

Your issue is caused by ::ng-deep, which will apply style to all .mat-input.underline elements in the page once the component has been loaded and style injected.

If you really want to keep the ::ng-deep combinator, you can add the :host selector to prefix your rule, which will target the host element and not leak the css to other components (apart from child components)

:host ::ng-deep .mat-input-underline
{
  display: none;
}

https://angular.io/guide/component-styles#host

Answer 2

I'm assuming you are using Angular Cli to generate your components...

You need to Emulate the encapsulation property on your Component . Although Angular defaults to 'Emulate'. (Thanks David, for correcting me).

In a nutshell, Emulated allows your component to make use of global styles, while keeping its local styles to itself.

@Component({
  selector: 'app-child-component',
  template: `<div class="parent-class">Child Component</div>`,
  encapsulation: ViewEncapsulation.Emulated
})

Also, ::ng-deep is meant to pass styles from parents to children. So if you are trying to keep your child elements from adopting the styles of their parents, using that is working against you.

Answer 3

"/deep/" is deprecated and "::ng-deep" is the way but be careful. Please go through below official documentation for detailed information.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 4

Style your component this way, this styling would not leak to the child component. Use ::ng-deep within :host but exactly like I have done below.

:host {
        ::ng-deep p, .py-8 {
            margin: 0 !important;
        }
    }