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?

Solution 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

Solution 2

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;
        }
    }

Solution 3

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.

Solution 4

"/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

View more solutions

Comments

[David]

ViewEncapsulation is set to emulated by default : angular.io/api/core/ViewEncapsulation

[joshrathke]

Your right, sorry for the confusion. I was mixing up a separate issue I recently had. I removed the incorrect info. Either way though, it doesn't change my answer, but I am assuming you are still having the issue.

[wrabarias]

so how can anyone solve this. I'm trying to apply this global style: .mat-form-field-infix{ padding: 0.5em 0 0.5em 0 !important; } and in my component css change it to a 0.2em padding but when ever that component is load the style gets apply across to all the components

[eddy]

This doesn't work. I think what the OP and I want is a way to change a global style but make that change happen when you are in a specific component

[Pismotality]

You are my hero.