In this series, I will explain how to customize the Angular Materialtheme,components in particular ( that's usually the most irritating part ) andyour own components using the Angular Material Way 💅 . I hope this series will help, new developers or anyone who has struggled, to get a better understanding and perspective on the topic.

Why am I doing this series?

I have been using Angular Material for a long time and every time I need to do some adjustments to the angular material components, in the past I usually end up ( mostly ) overriding CSS properties in stylesheets instead of customizing the sass variables and generating the component design using the sass mixins available to us ( which I have stopped doing a while ago 😉 ) to have a moresystematic,recommended andscalable way.

Here is a simple example you might relate to:

Let us say we want to increase the font size of themat-paginatorcomponent, as seen by the red border in the picture above, we have in my opinion 2 ways to increase the font size.

a. Directly changing the css property for the specific element:

.mat-paginator{font-size:30px}/* you might need to add !Important /*/* depending on where you add this css or the ViewEncapsulation method you use.*/

b. Updating the Sass Map provided by Angular Material:

This is the long (correct better ) way where you define a typography variable called$caption and then pass it to theangular-material-typography, as this variable is used by the components inits sass definitions, also along the process initiating themat-core() mixing, using the correct variables defined in thesass-map and lastly passing everything to themat-light or mat-dark theme mixin(ignore the order of the steps at the moment). This process already seems to be a little complicated just to change thefont-size but once you understand the process, the rest becomes very easy.

/* not complete example, we will visit it example in full detail in the series later */...$custom-theme:mat-typography-config($caption:mat-typography-level(14px,16px,400),);@includeangular-material-typography($custom-theme);....

As much as it's easier to do it the first way, it is not recommended to directly change these values as you will end up with a lot of hacks to make the design customizations you want. And if you are going to use other material components ( which you will indeed end up doing ), it will be difficult for new and other team members to understand it if you have a decent codebase.

Also, the currentguidelines available on the Angular Material website are not clear enough or detailed enough and most of the StackOverflow posts use a dirty hack to fix the design using!importantmost of the time.

So if someone is starting a project then I would recommend doing it in a way that it is scalable and easy to maintain aka theAngular Way 😌.

Follow for upcoming articles in this series. And so comment if you have struggled with Angular Material components and share the challenged you have faced.

See you in the next article.