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

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>

</mat-tab-group>.

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