I have 3 components, which has these angular materials

1. mat-forms inside the mat-card
2. mat-expansion panel inside mat-card
3. pagination card, inside a card. So when I try to override the CSS styles using View Encapsulation, like this

      encapsulation: ViewEncapsulation.None,
      host:{"class": "app-forms"}// component name here 

I overrode the form's components CSS styles. IT works fine until I navigate to a different component and when I come back the forms component styles are broken. And even other components styles are Broken. (The forms components take the style of other components card styles)

I tried using /deep/ as it is deprecated, didn't work for me I understand why this is happening I'm not able to find any solution on how to overcome this.

CodePudding user response：

try to add your own classes to the material component and override the material classes by your own class

for example

<mat-form-field ></mat-form-field>

and in styles.css file

.custom-form-field {
  // your styles
}

.custom-form-field .mat-input-element {
  // your styles for the inner material(html) elements
}