CODEWITHSUNDEEP
htmlcssangularangular-material
user1472672
user1472672

Reputation: 365

Overriding a material CSS class in Angular component CSS

I have overridden some global material styles in an Angular component CSS file (not scss) like so:

.fixed-plugin .dropdown-menu {   
   left: -503px !important;
   width: 500px;
}

This does work, however, it affects all references to these CSS classes in the component which is fine where is only one reference.

What I would really like to do is somehow create my own class and somehow inherit from the fixed-plugin .dropdown-menu and then apply my overrides (change widths). Then I can reference my own class in the only place I need it and the global material CSS remains untouched.

Thanks

Upvotes: 0

Views: 563

Answers (1)

Taras
Taras

Reputation: 1145

In your component styles use this :host ::ng-deep .dropdown-menu. It limits styles to your component and overrides global angular styles for your components inside.

Upvotes: 0

Related Questions