CODEWITHSUNDEEP
angular-material
Richard
Richard

Reputation: 4415

Load Angular Material before own styles

We have an Angular project, with Material and we're having some issues with overriding styles.

For example, if we want to change the border-radius globally on <mat-card>, we currently need to add important to the styles:

.mat-card { border-radius: $some-var !important; }

This seems to me to be caused by the material styles loading after our own custom styles. At least according to "traditional" CSS standards. So usually you could just change the load order around, and the last loaded styles would overwrite the previous.

Is there a way to achieve this? Or how are we supposed to style these kinds of elements, without adding !important all over?

Upvotes: 1

Views: 595

Answers (1)

G. Tranter
G. Tranter

Reputation: 17908

You are not really supposed to "style these kinds of elements" - that's not what Angular Material is about. But some customization can be done - and a guide is available: https://v6.material.angular.io/guide/customizing-component-styles.

You especially need to understand how style is encapsulated and dynamically applied. You can control when the global Angular Material style sheet is loaded in the "traditional" way, but you cannot control when all component style is applied because some of it is dynamic. If you hope to completely restyle everything - you should probably consider a different library as it is not always merely a matter of redefining class properties.

Upvotes: 2

Related Questions