Theming Angular Material Components - Introduction
Tags: angular, angularmaterial, webdev, beginners
Published: 2022-08-29 15:06:00

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: 

![Angular Material Paginator Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koyzt7q98u64aptwp4vw.png)

Let us say we want to increase the font size of the `mat-paginator` [component](https://material.angular.io/components/paginator/overview), 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:**
```css
.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](https://github.com/angular/components/blob/2f9a59a24c0464cbed7f54cbeb5cba73e6007715/src/material/paginator/_paginator-theme.scss#L50), also along the process initiating the `mat-core()` mixing, using the correct variables defined in the [sass-map](https://sass-lang.com/documentation/values/maps) 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. 

```sass
/* 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](https://material.angular.io/guide/theming) 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](https://stackoverflow.com/questions/53684763/how-to-remove-space-bottom-mat-form-field). 

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.