Override Angular Material style in Angular component

Question

I am using Material 2 in my Angular component. I want to override one of the classes e.g. .mat-input-wrapper defined in

Answer 1

There's no need to wrap with

. Rather, to style an Angular Material element like the title of a card..

   
      {{title}}
   

CSS:

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

Applying this to another 'child' element like

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

Using VS Code, hovering in the CSS editor will reveal detail of how this CSS will render. In this example, ...

Of course, if you have multiple uses of the card in a single component, then you will need to make the distinction with a CSS class name adding the class="card-style-1" to the element itself, like .

CSS:

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

The alternative to this is to create individual components specific to the uses of different cards, styling each as required.

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...