I’ve written about the Angular CDK before and how to create custom themes using the Angular Material Theme Generator.
With Angular Material v19, custom styling has become much more manageable.
If you navigate to the documentation of any component, you’ll notice a new tab called “styling”, as shown here for the button component:
What’s nice about that new approach is that it’s based on mixin overrides for different types of components. That’s great if your goal is to change something for all instances of a given component without changing the styles of other parts of the application by accident, since it’s not CSS class based.
For instance, Material buttons tend to be oval-shaped by default:
If I want to make my button more rectangular, I can add the following code to my main styles.css:
@use '@angular/material' as mat;:root {
@include mat.button-overrides(
(
filled-container-shape: 10px
)
);
}
And now all my buttons look like this:
I don’t need to know about Material CSS classes. All I need is to take a look at the documentation in the “styling” tab, which can be filtered by name or type.
Here, I wanted to change the colors of my button, so I filtered by color:
With that information, I can update my CSS as follows:
:root {
@include mat.button-overrides(
(
filled-container-color: pink,
filled-label-text-color: grey,
filled-container-shape: 10px,
)
);
}
And I get a new style for all my buttons:
I used :root as the scope in my examples, but you can use a component selector or any CSS selector to make exceptions to your styling. We’re still using CSS, after all. Here, the CartViewComponent would be the only one with pink buttons:
cart-view-component {
@include mat.button-overrides(
(
filled-container-color: pink
)
);
}
This approach is easier and supported by better documentation than anything else offered by Material in the past. That said, the documentation could be improved, as is the case for any documentation, and it sometimes takes some experimentation to find the right style to tweak.
My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help web development teams learn and become comfortable with Angular.
If you need any help with web development, feel free to get in touch!
If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and my Daily Angular Newsletter to receive helpful daily tips.
