Cannot customize style of md-tabs

Bug, feature request, or proposal:

Adding custom style to the tabs header

What is the expected behavior?

affect css style of header (font size, color, display…)

What is the current behavior?

Style is beeing totally ignored due to attribute selectors generated by the own element ignoring the styleUrls ones

What are the steps to reproduce?

Create a simple element (html):

<md-tab-group>
    <md-tab>
        <template md-tab-label>Personal info</template>
        <template md-tab-content>
            <h4>Name, address</h4>
            <div class="">
                Some data here
            </div>
        </template>
    </md-tab>

    <md-tab>
        <template md-tab-label>Payment</template>
        <template md-tab-content>

            <div class="">
                Payment setup
            </div>
        </template>
    </md-tab>
</md-tab-group>

Add this style in the .scss:

md-tab-group {
    .md-tab-header {
        font-size: 12px !important;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        .md-tab-label {
            flex: 1;
            min-width: 1px;
        }
    }
}

Plunk demo http://plnkr.co/edit/K1iVNV

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

Need to customize md tabs style/colors/responsive

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

Angular 2.0, Material alpha 8-2

Is there anything else we should know?

[anderflash]

You need to use /deep/:

/deep/ md-tab-group {
...

[ivanntis]

I resolve my problem

/deep/ .mat-tab-label{ line-height: 28px !important; height: 28px !important;

} /deep/ .mat-tab-header { background-color: #0288D1; color: white; border-radius: 5px 5px 0px 0px; } /deep/ .mat-ink-bar { background-color: #d14b02 !important; min-width: 120px; }

result

Tankyou