Search code examples
cssangularangular-materialstyling

md-tab styling (Angular 1.6). Is it even possible?

H ello, everyone!

I have a problem with styling md-tab

It looks like this by default:

enter image description here

This is what it should look like:

enter image description here

What I am trying to achieve is:

  • use styles from material theme or colors from it (ng-colors)
  • update background of active/inactive elements (as in the second picture)

Here are some thoughts:

  • CSS modifying doesn't seem to be right in this case because I want to rely on theme colors.
  • md-primary class assignment doesn't work on md-tab for some reason (don't understand why)
  • md-colors assignment doesn't work for the same reason, I suppose.
  • probably, I will have to create some custom tab components instead of these and then style them. I am not sure if it is right in my case.

Question. Is it possible to style md-tab the way I described?

Thanks!

Solution

  • The fastest and easiest way to do this is via updating css like this

    md-tabs .md-tab {background:white; margin-left:20px}
md-tabs .md-tab.md-active {background:#006E7B; color:white !important}
md-ink-bar {display:none}