How to override material CSS styles?

You do it in your global style sheet (style.scss), or in any style sheet that is not encapsulated.

To override, take the selector by inspecting the HTML element in your browser, and override the property you want.

If it still fails, you can use !important to force the style to be applied.

Remember to order your style sheet imports in your angular.json file too (thank you @SurenSrapyan for reminding me)


In the angular configuration file you need to import your styles after materialize styles