在 Angular 组件 Z2C56C360580420D293172F42D85 中覆盖材料 CSS class

Question

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

Answer 1

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.