components: 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?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 27 (7 by maintainers)

Most upvoted comments

You need to use /deep/:

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

+17

anderflash on Sep 28, 2016

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 captura de pantalla 2017-04-20 a las 7 38 53 a m

Tankyou

ivanntis on Apr 20, 2017

@andrewseguin why you didn’t set “md-tab-group” component encapsulated to none ?

AbdallahBedir on Feb 11, 2017

@andrewseguin None of that 3 methods help to customize some styles right now the style of a md-tab header. The only way for now, is to use the !important keyword on the style (and this is not recommended really). I can set the encapsulation to NONE of my component, but this will affect only my component, not Tabs component. => this seems to be wrong You’re closing an issue that is an issue, style should be customized.

albanx on Nov 11, 2016

There are three ways to resolve this right now. (1) Set view encapsulation to NONE on the component that hosts your tabs and use your component style sheet (2) Load a separate style sheet apart from Angular (e.g. through index.html) that affects the tabs (3) Use /deep/, which has so far been deprecated from the spec but still supported by Angular for the time being. Not recommended.

andrewseguin on Nov 11, 2016

I see two problems with your Plunk

Your styles are not valid CSS:

/*CSS styles should not be nested*/
md-tab-group {
   .md-tab-header{
    ...
   }
}

Styles in components are isolated, so the Material component (md-tab-group) cannot see your App component styles. Put the styles you want to override in a main CSS file that you link to from your index.html.

On this Plunk, I have implemented some of the styles you were going for by putting them in index.css

RoxKilly on Sep 20, 2016

Already mentioned, but I see a few adopting the /deep/ solution. /deep/ is being deprecated, sooner or later your apps will break.

ksiabani on Jul 18, 2017

Let’s say we have:

<div class="articles">
  <article>
    <md-checkbox></md-checkbox>
  </article>
</div>

So you would style in SCSS in this way:

.articles{
  color: blue; /*style for entire articles section */
  article{
    color: red; /* style for each article*/
    /deep/ md-checkbox .md-checkbox-inner-container{
      margin: 4px 0px 0px 0px;
    }
  }
}

It will be translated to:

.articles{
  color: blue;
}
.articles article{
  color: red;
}
.articles article /deep/ md-checkbox .md-checkbox-inner-container{
  margin: 4px 0px 0px 0px;
}

So .articles article /deep/ md-checkbox .md-checkbox-inner-container may be specific enough to style the proper component without !important. As md-checkbox is a component, I think we need to edit the component style itself to change it without /deep/.

anderflash on Oct 17, 2016