Components: tabs customization

[sedestrian]

Bug, feature request, or proposal:

Tabs cannot be customized to have a different background, ripple, bottom bar and text color or it's not clear how to do it

What is the expected behavior?

have a way to change the colors

What is the current behavior?

can't find a way to do it

What are the steps to reproduce?

using a md-tab-group results in a white background not a colored one with white text, how to change?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://embed.plnkr.co/o077B6uEiiIgkC0S06dd/

What is the use-case or motivation for changing an existing behavior?

customization

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4, Material: latest

Is there anything else we should know?

No

[m0nzderr]

+1

[leocaseiro]

For the time being, you can use plain CSS to customize it.

Make sure you remove encapsulation from your component with ViewEncapsulation.None

Here are some selectors you can customize:

md-tab-group {
  background-color: pink;
}
.mat-tab-body-wrapper {
  color: white;
  background-color: red;
}
.mat-tab-label.mat-tab-label-active {
  background-color: #3f51b5;
}

You can see in action on this plunker: https://plnkr.co/edit/2vHN2xnb4I25cYMusapQ?p=preview

PS: You should be able to customise within your theme using SASS

[chriszrc]

@kara So can we set background color individually on tabs now? Doesn't seem to work on 8.0.0-rc.0

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}