Cannot customize style of md-tabs #1276

albanx · 2016-09-19T21:41:05Z

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?

The text was updated successfully, but these errors were encountered:

RoxKilly · 2016-09-20T00:30:04Z

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

albanx · 2016-09-20T08:03:42Z

I just copy pasted it, I am using scss in my code. But I am able to customize style of md-card for example. I edit the plunk example http://plnkr.co/edit/K1iVNV?p=preview.

I notice that my component is generating this css for my style:

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

But this is being override by this css, where the attribute selector _nghost-yed-7 get priority since it is present in the tag of the tab header:

[_nghost-yed-7] { display: flex; flex-direction: column; font-family: Roboto, "Helvetica Neue", sans-serif; }  .md-tab-header[_ngcontent-yed-7] { overflow: hidden; position: relative; display: flex; flex-direction: row; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; }  .md-tab-label[_ngcontent-yed-7] { line-height: 48px; height: 48px; padding: 0 12px; font-size: 14px; font-family: Roboto, "Helvetica Neue", sans-serif; font-weight: 500; cursor: pointer; box-sizing: border-box; color: currentColor; opacity: 0.6; min-width: 160px; text-align: center; } .md-tab-label[_ngcontent-yed-7]:focus { outline: none; opacity: 1; background-color: rgba(178, 223, 219, 0.3); } .md-tab-disabled[_ngcontent-yed-7] { cursor: default; pointer-events: none; }  .md-tab-body-wrapper[_ngcontent-yed-7] { position: relative; overflow: hidden; flex-grow: 1; display: flex; }  .md-tab-body[_ngcontent-yed-7] { display: none; overflow: auto; box-sizing: border-box; flex-grow: 1; flex-shrink: 1; } .md-tab-body.md-tab-active[_ngcontent-yed-7] { display: block; }  md-ink-bar[_ngcontent-yed-7] { position: absolute; bottom: 0; height: 2px; background-color: #009688; transition: 350ms ease-out; }/*# sourceMappingURL=tab-group.css.map */

I really cannot understand this behavior, it seems that md-tabs are a sort of subcomponent...?!

anderflash · 2016-09-28T23:38:12Z

You need to use /deep/:

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

vinagreti · 2016-10-17T17:22:11Z

Even using /deep/ the styles are not applied. You must use !important to ensure the style will be applied.
So, the question is, what is the correct way of doing style modification in md components? I my case, I could not change md-checkbox margins when placing it inside a table <td>. So I ended up with this code to be possible to change the checkbox style

/deep/ .md-checkbox-inner-container{
    margin: 4px 0px 0px 0px !important;
}

The problem is that I do not want to use !important, so, how can I do this without !important?

anderflash · 2016-10-17T18:17:19Z

Sometimes I need to put a more specific selector, for example:

body <selector> {...

instead of

<selector> {...

If you use SCSS you can use the hierarchy feature to get a better specification of the selectors, and they will win this "competition".

vinagreti · 2016-10-17T18:32:09Z

What do you mean by "the hierarchy feature"?

Let's say I have a component that is a table and then I place a md-checkbox at the first column of the tbody rows, so, how can I use the hierarchy feature to change the md-checkbox positioning without using !important and /deep/?

anderflash · 2016-10-17T19:18:37Z

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/.

vinagreti · 2016-10-17T19:27:44Z

Thanks @anderflash. Using /deep/ md-checkbox .md-checkbox-inner-container worked for me.

So we can assume that it is the right behavior because Angular 2 styles (except those that are loaded by index.html) are scoped to the component so one component should not be able to change nested components unless you use /deep/?

anderflash · 2016-10-17T21:14:42Z

That's also my view about this issue. I'm also learning it and the tools are evolving rapidly. It still seems like a hack to put /deep/ wherever we want back default css behavior (changing nested components without context). So I think it will change in the future.

andrewseguin · 2016-11-11T23:09:07Z

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.

albanx · 2016-11-11T23:28:20Z

@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.

andrewseguin · 2016-11-11T23:43:23Z

Perhaps I'm misunderstanding your issue. I am able to change the styling on this tab header by removing view encapsulation and applying styles that have a higher specificity than those defined in the default md CSS.

http://plnkr.co/edit/J6Wnn0?p=preview

albanx · 2016-11-11T23:50:48Z

No you've not misunderstood it. In your case, as you can see, the encapsulation was not enough, you've added also .my-tabs class. Any case this seems to be a better solution, I would have preferred to have a way just to customize the style without breaking the "rules"

andrewseguin · 2016-11-11T23:58:03Z

Yes, it is necessary to use higher specificity in CSS selectors in order to override the default style of the tab header. Does this solution not fit your needs?

albanx · 2016-11-12T00:01:52Z

Let says yes but in general I would like to preserve encapsulation of my component and be able to customize the style of my app at the same time.

andrewseguin · 2016-11-12T00:14:56Z

I would like to be able to do that as well, but unfortunately this is beyond the bounds of what can be done in material (or any UI toolkit) due to how angular 2 is implemented. Feel free to file an issue with angular to suggest this.

FilipeQ · 2016-12-27T12:08:06Z

encapsulation to NONE is the better way to customize tabs component?

AbdallahBedir · 2017-02-11T12:46:54Z

@andrewseguin why you didn't set "md-tab-group" component encapsulated to none ?

ivanntis · 2017-04-20T12:39:47Z

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

ArnoutPullen · 2017-05-10T12:22:06Z

Maybe the same way you can style a toolbar like this:

<md-toolbar color="primary">Title</md-toolbar>

<md-tab-group color="primary"> <md-tab label="Title">Content</md-tab> </md-tab-group>

mist3r3 · 2017-05-22T12:44:21Z

Hello, it works indeed as @ivanntis said. But even if I can change all of the tabs, how can I change only one tab style? I want to add a + at the end in order to add a tab.
Thank you.

ksiabani · 2017-07-18T12:27:55Z

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

mist3r3 · 2017-07-19T06:02:48Z

So what is the best solution?

ksiabani · 2017-07-27T14:01:36Z

@mist3r3 the choices you have are as reported by @andrewseguin earlier in this thread. Since /deep/ is being deprecated the solutions you are left with are (copied from @andrewseguin above):

(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

Personally I use option 1.

jraadt · 2017-07-30T01:02:49Z

The issue with (1) setting the view encapsulation to NONE is those styles bleed throughout the entire app. If my component's stylesheet I had h1 { color: blue } then when changing the component from Emulated to None it makes ALL h1 elements blue that don't have a color defined by a more specific rule.

I would like to say "make this component and all it's children" h1's blue. Setting encapsulation to none I would have to add an application-wide unique selector to my component and use that in the component's stylesheet. But that's what I'm trying to get away from doing and why I fell in love with component view encapsulation.

AnthonyNahas · 2017-08-03T20:54:20Z

@anderflash i did the same thing!
i wrapped it into a css class e.g --> class ="test"
--> test{
/deep/ md-checkbox .md-checkbox-inner-container{
margin:..;
}
}

and its works!

angular-automatic-lock-bot · 2019-09-06T20:02:02Z

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.}

andrewseguin self-assigned this Nov 3, 2016

andrewseguin closed this as completed Nov 11, 2016

willshowell mentioned this issue Jul 27, 2017

[proposal] guide for customizing material component styles #6087

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot customize style of md-tabs #1276

Cannot customize style of md-tabs #1276

albanx commented Sep 19, 2016

RoxKilly commented Sep 20, 2016 •

edited

albanx commented Sep 20, 2016

anderflash commented Sep 28, 2016

vinagreti commented Oct 17, 2016

anderflash commented Oct 17, 2016

vinagreti commented Oct 17, 2016 •

edited

anderflash commented Oct 17, 2016

vinagreti commented Oct 17, 2016

anderflash commented Oct 17, 2016

andrewseguin commented Nov 11, 2016

albanx commented Nov 11, 2016 •

edited

andrewseguin commented Nov 11, 2016 •

edited

albanx commented Nov 11, 2016 •

edited

andrewseguin commented Nov 11, 2016

albanx commented Nov 12, 2016

andrewseguin commented Nov 12, 2016

FilipeQ commented Dec 27, 2016

AbdallahBedir commented Feb 11, 2017

ivanntis commented Apr 20, 2017 •

edited

ArnoutPullen commented May 10, 2017

mist3r3 commented May 22, 2017

ksiabani commented Jul 18, 2017 •

edited

mist3r3 commented Jul 19, 2017

ksiabani commented Jul 27, 2017

jraadt commented Jul 30, 2017

AnthonyNahas commented Aug 3, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

Cannot customize style of md-tabs #1276

Cannot customize style of md-tabs #1276

Comments

albanx commented Sep 19, 2016

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

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

Is there anything else we should know?

RoxKilly commented Sep 20, 2016 • edited

albanx commented Sep 20, 2016

anderflash commented Sep 28, 2016

vinagreti commented Oct 17, 2016

anderflash commented Oct 17, 2016

vinagreti commented Oct 17, 2016 • edited

anderflash commented Oct 17, 2016

vinagreti commented Oct 17, 2016

anderflash commented Oct 17, 2016

andrewseguin commented Nov 11, 2016

albanx commented Nov 11, 2016 • edited

andrewseguin commented Nov 11, 2016 • edited

albanx commented Nov 11, 2016 • edited

andrewseguin commented Nov 11, 2016

albanx commented Nov 12, 2016

andrewseguin commented Nov 12, 2016

FilipeQ commented Dec 27, 2016

AbdallahBedir commented Feb 11, 2017

ivanntis commented Apr 20, 2017 • edited

ArnoutPullen commented May 10, 2017

mist3r3 commented May 22, 2017

ksiabani commented Jul 18, 2017 • edited

mist3r3 commented Jul 19, 2017

ksiabani commented Jul 27, 2017

jraadt commented Jul 30, 2017

AnthonyNahas commented Aug 3, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

RoxKilly commented Sep 20, 2016 •

edited

vinagreti commented Oct 17, 2016 •

edited

albanx commented Nov 11, 2016 •

edited

andrewseguin commented Nov 11, 2016 •

edited

albanx commented Nov 11, 2016 •

edited

ivanntis commented Apr 20, 2017 •

edited

ksiabani commented Jul 18, 2017 •

edited