如何设置 Angular 6 mat-tabs 的样式？

Question

I have been trying to apply different styles to my mat-tab rows.

I have a web page with has 2 on, one is a main menu (Home, About Us etc) and the second one is an image one using mat-icon .

I want to apply different styles to them but nothing works whatsoever.

I have tried adding separate CSS to each components CSS files but it doesn't apply it unless its in the main (route) style.css file which then applies the style set to both tabs.

I have tried:

HTML for 1st tab row (uses main CSS file)

<mat-tab-group class="mainContent">
    <mat-tab label="Personal details">
        <app-clientpersonalinfo></app-clientpersonalinfo>
    </mat-tab> 
    <mat-tab label="Product details">
        <app-comingsoon></app-comingsoon>
    </mat-tab>
</mat-tab-group>

HTML for 2nd tab row (tried adding inline styling)

<mat-tab-group style="color: red !important">
  <mat-tab label="Personal details" style="color: red !important">
    <ng-template mat-tab-label style="color: red !important">
      <mat-icon title="Investor's personal details" style="color: red !important">person</mat-icon>
    </ng-template>
  </mat-tab> 
  <mat-tab label="Notes">
      <ng-template mat-tab-label>
          <mat-icon title="Investor notes">receipt</mat-icon>
        </ng-template>      
  </mat-tab>
</mat-tab-group>

CSS file for first component with tab group

/* Main Tab */
.mat-tab-header {
    border-bottom: 2px solid green;
    height: 46px;
}

.mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-primary .mat-tab-label-active {
    border-top: 2px solid green;
    border-left: 2px solid green;
    border-right: 2px solid green;
    background-color: red;
}

    /* ink bar style */
    .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
        background: transparent;
    }
/* ---  --- */

The first tab group does not have green or red as specified

CSS File For Second Component With Tab Group

/* Main Tab */
.mat-tab-header {
    border-bottom: 2px solid blue;
    height: 46px;
}

.mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-primary .mat-tab-label-active {
    border-top: 2px solid blue;
    border-left: 2px solid blue;
    border-right: 2px solid blue;
    background-color: yellow;
}

    /* ink bar style */
    .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
        background: transparent;
    }
/* ---  --- */

The second tab group does not have blue or yellow as specified only what's in the main CSS file.

I also tried adding the horrible !important to all CSS rows but again it doesn't work at all:

Main CSS

/* Main Tab */
.mat-tab-header {
    border-bottom: 2px solid #86a6c8;
    height: 46px;
}

.mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-primary .mat-tab-label-active {
    border-top: 2px solid #86a6c8;
    border-left: 2px solid #86a6c8;
    border-right: 2px solid #86a6c8;
    background-color: #cedbe9;
}

    /* ink bar style */
    .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
        background: transparent;
    }
/* ---  --- */

Folder structure

src
|
|_components
  |
  |_menus
    |
    |_mainmenu
    |
    |_mainmenu.component.css
    |_mainmenu.component.html
    |_mainmenu.component.spec.ts
    |_mainmenu.component.ts
  |
  |_submenu
    |
    |_submenu.component.css
    |_submenu.component.html
    |_submenu.component.spec.ts
    |_submenu.component.ts
|
|_styles.css

Answer 1

Please donot panic, as it seems from yur first message line you have worries about angular and its tabs. As far as i can understand what you have written, I THINK THERE IS SIMPLE solution that we can work out and make the tabs great.

right, first things first, a disclaimr, what i am saying will be pure css and script, we will not ebe touching angular which actually is agood thing as in any case the tabs are a material thing.

1. we must clear all of your css files. i would advise clearing styles.scss and then delting the _mainmenu.component.css and _sub menu.component.css. (ALERT-1 QUESTION, WHY DO YOU HAVE _UNDERSCORE, THIS IS JAVA THING WE ARE SAYING CSS IT WOULD JUST BE mainmenu.component.css).

2. with the css files deleterd, we can now add the css we need. so in styles css, add the following:

    angular.main.component.a { width: 150px; height: 80px; background-color: red; -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari 3-8 */ transform: rotate(20deg); } angular.sub.main.component.b { width: 150px; height: 80px; background-color: yellow; -ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari 3-8 */ transform: skewY(20deg); } div.c { width: 150px; height: 80px; background-color: yellow; -ms-transform: scaleY(1.5); /* IE 9 */ -webkit-transform: scaleY(1.5); /* Safari 3-8 */ transform: scaleY(1.5); }

DO NOT PANIC IF this makes the tabs rotate at a strange angle. simply refresh the page as it will be straight again and in the rows.

I hope this was of helps, please post comments if i can do more helps.

Thank you

Answer 2

Hello and may I say I feel your plight! Our teams of threes have just experienced the exact same issues!

The ways we went about wit was via the following:

Component 1

Say we have a component. Let's call him Billy. Billy was a good little component and wrapped his good heart around another component name Timmy.

Component 2

So if we have tabs. Imagine them like so:

Billy -> Timmy -> Tabs.

Got it?

Good!

Where were we? Righttttt, now Billy and Timmy want to be there own peoples. They want different haircuts and different T-Shirts and the like but they're currently being dressed by the same person. Let's call this main.css .

Solution!

create abilly.css and timmy.css file

and let main.css be it's own thing.

Then Component 1 inherits the timmy file. And Billy is happy.

Make sense now but it took our team of threes so manys days to figure this out.

So glad I could help.

Answer 3

You can style default material classes by using the ::ng-deep pseudo element.

:host ::ng-deep .mat-tab-header {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }

The :host is optional, that scopes the styles to the tabs in the current component.