0

In an Angular application, using Angular Material for themes, I'm trying to update a css class in a component when my theme changes to dark.

This would work, but it would affect all components, loosing the encapsulation:

::ng-deep .dark-theme { // must have ::ng-deep to see .dark-theme on body
  .action-button:hover {
    color: #ffffff;
  }
}

How can I have same result, but only for one component?

I've tried this as mentioned here but doesn't seems to work for me:

::ng-deep .dark-theme {
  :host .action-button:hover {
    color: #ffffff;
  }
}
// OR
:host ::ng-deep .dark-theme .action-button:hover {
  color: #ffffff;
}
Leccho
  • 467
  • 5
  • 23
  • What ‘doesn’t work’ In the last two cases? Styles don’t apply or styles leak? – wlf Sep 20 '22 at 11:26
  • classes are just not applied might have something to do with the fact that the `.dark-theme` is applied on the body, but I don't really know – Leccho Sep 20 '22 at 12:54
  • check [this](https://stackoverflow.com/a/69734259/5536695), if it helps in anyway – YogendraR Sep 20 '22 at 13:56

1 Answers1

0

Try this :

As we set the View Encapsulation(Emulated) to the required component the styles will be applied only to the elements within the component's template.

@Component({ selector: 'app-emulated-encapsulation', template: '', styles: '', encapsulation: View Encapsulation .Emulated, })

With the limited info provided to actually test the scenario, you can avoid using ng-deep and host too if setting the Encapsulation property in @Component block fixes your issue.

Pls refer - https://angular.io/guide/view-encapsulation for further info.

Omkar Nilakhe
  • 52
  • 3