Currently, I am working on a project that was passed down to me by a former colleague. It is a gradual process of discovery as I try to address and resolve any issues it may have.
One particular element in the project is a md-tab-header with a .mat-tab-header class that I want to customize using CSS to change its appearance. I attempted something like this:
.mat-tab-header{
background-color: blue !important;
}
or
md-tab-header.mat-tab-header{
background-color: blue !important;
}
I decided to place this code in the component.css file of a specific page so that it does not impact the entire project (if I wanted it to affect all pages, I would have included it in my HTML code). However, I am facing difficulty overriding Angular's default styles in this manner. What should be my next step?
The most efficient solution would probably involve altering the project architecture, but since this is a minor issue, I would prefer to avoid making significant changes if possible.