Add Customize Css Class to the Mat-Tab-Content and other Mat-X tags which are generated runtime

[Prashant-Kan]

Bug, feature request, or proposal:

Not able to add customize css class or apply css styling to any Mat-X element that are generated during runtime.

What is the expected behavior?

Customize style and add user defined CSS Class to override the behaviour of element (if required)

What is the current behavior?

Not applied

What are the steps to reproduce?

This is my html body

<mat-tab-group class="container">
                   <mat-tab label="General" >
                   <div class="container">
                       <div class="row">
                           <div class="col-sm-2 col-md-4 col-lg-6">
                              This is the test 
                           </div>
                           <div class="col-sm-2 col-md-4 col-lg-6">
                               This is the test
                           </div>
                       </div>
</div>
</mat-tab>
</mat-tab-group>

Below is the Generated Html when it runs in the browser(Chrome).

<mat-tab-group _ngcontent-c12="" class="container mat-tab-group mat-primary">
	<mat-tab-header class="mat-tab-header" ng-reflect-disable-ripple="false" ng-reflect-selected-index="0">
	
		<div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled" mat-ripple="" ng-reflect-disabled="true"><div class="mat-tab-header-pagination-chevron"></div></div>
		<div class="mat-tab-label-container">
			<div class="mat-tab-list" role="tablist" style="transform: translate3d(0px, 0px, 0px);">
				<div class="mat-tab-labels">
						<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->

						<div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" ng-reflect-disabled="false" id="mat-tab-label-0-0" tabindex="0" aria-controls="mat-tab-content-0-0" aria-selected="true">

							<!--bindings={}--><!--bindings={"ng-reflect-ng-if": "true"}-->
							General
						</div> 
				</div>
				<mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 0px; width: 160px;"></mat-ink-bar>
			</div>
		</div>
		
		<div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled" mat-ripple="" ng-reflect-disabled="true"><div class="mat-tab-header-pagination-chevron"></div></div>
	</mat-tab-header>

<div class="mat-tab-body-wrapper">
	<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
	<mat-tab-body class="mat-tab-body ng-tns-c23-28 mat-tab-body-active ng-star-inserted" role="tabpanel" ng-reflect-_content="[object Object]" ng-reflect-position="0" id="mat-tab-content-0-0" aria-labelledby="mat-tab-label-0-0" ng-reflect-origin="0">
	
		<div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: none;"><!---->
			<div _ngcontent-c12="" class="container ng-star-inserted" style="">
				<div _ngcontent-c12="" class="row">
					<div _ngcontent-c12="" class="col-sm-2 col-md-4 col-lg-6">
						This is the test
					</div>
					<div _ngcontent-c12="" class="col-sm-2 col-md-4 col-lg-6">
						This is the test
					</div>
				</div>
			</div>
	<!----></div>
	</mat-tab-body> 
</div>

.

REQUEST.
Want to add "MyTabClass" to the "div.mat-tab-body-content". I tried adding css style using !important, but still fails to apply custom styling or custom css class to the tags which are generated at runtime.

Please anybody aware about how to implement this guide me.
I am new to the Material Design with Angular 2

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

To have a upperhand in the styling, when required. Usually we are using the default behaviour of material controls.

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

Latest version of all.
OS- windows 10

Is there anything else we should know?

Yes, this is not specifically related to the Mat-tabs. I was searching the way to apply custom css to any of the mat-X controls sub-elements which are auto-generated during rendering in browser

[willshowell]

You are likely just encapsulating your styles. Take a look at this guide and see if it helps:

https://material.angular.io/guide/customizing-component-styles

[ovoronin]

Why is this closed? <mat-tab> classes are not applied anywhere

[willshowell]

@ovoronin if you place the styles in a global stylesheet or remove view encapsulation from your component styles, they'll be applied.

[ovoronin]

@willshowell
For example I have

<mat-tab-group>
   <mat-tab label="First" class="first">First</mat-tab>
   <mat-tab label="Second" class="second">Second</mat-tab>
</mat-tab-group>

Generated HTML is like this

<mat-tab-group>
   <mat-tab-header>...</mat-tab-header>
   <div class="mat-tab-body-wrapper">
      <mat-tab-body class="mat-tab-body mat-tab-body-active">
        <div class="mat-tab-body-content">First</div>
      </div>
      <mat-tab-body class="mat-tab-body">
        <div class="mat-tab-body-content">Second</div>
      </div>
   </div>
</mat-tab-group>

As you can see there are no CSS classes 'first' and 'second' anywhere
It will be good to have them applied to corresponding mat-tab-body elements

[willshowell]

I see. What DOM element would you expect to receive the class?

You could do this if you just wanted to style the body:

<mat-tab-group>
  <mat-tab label="First">
    <div class="first">First</div>
  </mat-tab>
  <mat-tab label="Second">
    <div class="second">Second</div>
  </mat-tab>
</mat-tab-group>

[ovoronin]

@willshowell
I was trying to style mat-tab-body elements to fix some scrolling stuff

[borsini]

@ovoronin I also wanted to style mat-tab elements, making them take all the available height.

I fixed them with flexbox using mat-tab-group { flex: 1; }in the component stylesheet and .mat-tab-body-wrapper { flex: 1; } in the global stylesheet.

Quick and dirty. It works but I'm quite sure it is not the best option 😟

[karthickDhanapal]

How to disable the animation that have been trigged when tab clicked ngtrigger translate-tab css

[hlgrondijs]

I have the same type of issue, where angular generates a wrapping <div> element inside the of the <mat-tab> tag in the generated code. In my case this <div> has display: flex set, where I want it to be display: block

My intuition tells me this is not the way we should be styling these elements. These generated components should never have to be touched if Angular is/was designed well. However if I change the display to block in DevTools as said above, I get the desired design and with flex I don't so, yeah... if it's possible, would like to know how :D

[shootdaj]

@willshowell What if placing them in the global styles is not possible? I have two types of tabs in my mat-tab-group and need to apply different styles to them. How would I accomplish this without applying classes to the specific mat-tabs?

[willshowell]

@shootdaj I think you might be limited to a workaround like some manual class manipulation.

@andrewseguin what do you think? would it be possible to allow classes be applied to mat-tab?

[benawhite]

@willshowell
If a class was applied to the mat-tab, I would expect the generated html to apply the class to both the label and the body. This would allow the dev to manage both with the addition of the appropriate selector. (.mat-tab-label.first or .mat-tab-body.first)

<mat-tab-group>
   <mat-tab label="First" class="first">First</mat-tab>
   <mat-tab label="Second" class="second">Second</mat-tab>
</mat-tab-group>

Generated HTML is like this

<mat-tab-group>
   <mat-tab-header>
      ...
      <div class="mat-tab-label first">...</div>
      <div class="mat-tab-label second">...</div>
      ...
  </mat-tab-header>
   <div class="mat-tab-body-wrapper">
      <mat-tab-body class="mat-tab-body first">
        <div class="mat-tab-body-content">First</div>
      </div>
      <mat-tab-body class="mat-tab-body second">
        <div class="mat-tab-body-content">Second</div>
      </div>
   </div>
</mat-tab-group>

[Hypenate]

@willshowell Any news on this? It would be great to have some flexibility over the control.

I tried to style a specific tab, but the class/style is thrown away when the tabs are generated in the browser.

[EnricoSaunders]

You can use ng-template:

<mat-tab>
    <ng-template mat-tab-label>
        <span class="first">First Tab</span>
    </ng-template>
    ...