Clever Geek Handbook

Override Angular Material Style in Angular Component

I am using material 2 <md-input-container>

in my Angular component. I want to override one of the classes for example. .mat-input-wrapper

defined in Angular Material. But I only want to override this component and the override should not affect other components on the page.

Here is a screenshot of the rendered element: Rendered md-input-container

+3


source to share


4 answers


As @Dylan pointed out, you should use /deep/

to change the CSS in the child compoenets. Here is the answer I was looking for:



:host /deep/ md-input-container .mat-input-wrapper

+6


source


Wrap it in div

:

<div class="special">
  <md-input-container>
</div>


Css:

.special md-input-container .mat-input-wrapper {
    //your css
}
0


source


The preferred solution would probably be to define the styles in your own material stylesheet. Using / deep / is deprecated (Angular V 4.3): https://angular.io/guide/component-styles#special-selectors

You can now use :: ng-deep as an alternative to define your own stylesheet.

However, using :: ng-deep can affect the use of Material icons negatively again when used to override the default font family (since Material Icons is also a font family)

0


source


No need to wrap <div class="someCssClassName">

. Rather, the style of the Angular Material Element, such as the name of the card.

<mat-card>
   <mat-card-title>
      {{title}}
   </mat-card-title>
</mat-card>

CSS

mat-card mat-card-title {
   color: red;
}

Applying this to another 'child' element like <mat-card-content> 

mat-card mat-card-content,
mat-card mat-card-title {
   color: red;
}

Using VS Code, hovering in a CSS editor will show the granularity of what that CSS will look like. In this example<mat-card>...<mat-card-title>

Of course, if you have multiple uses of the map in one component, you will need to make a distinction with the CSS class name by adding class="card-style-1"

to the element itself, eg <mat-card class="card-style-1"

.

CSS

mat-card.card-style-1 mat-card-content,
mat-card.card-style-1 mat-card-title {
   color: red;
}

An alternative to this is to create separate components specific to the use of different cards, each of which matches, if necessary.

0


source






More articles:


All Articles