Theming Angular Material Components - Introduction

In this series, I will explain how to customize the Angular Material theme, components in particular ( that's usually the most irritating part ) and your 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 more systematic, recommended and scalable way.

Here is a simple example you might relate to:

Let us say we want to increase the font size of the mat-paginator component, 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 the angular-material-typography, as this variable is used by the components in its sass definitions, also along the process initiating the mat-core() mixing, using the correct variables defined in the sass-map and lastly passing everything to the mat-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 the font-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),
);
@include angular-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 current guidelines 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 !important most 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 the Angular 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.