Override Angular Material style in Angular component

As @Dylan pointed out, you have to use /deep/ to alter the CSS within the child compoenets. Here is the answer I was looking for:

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

If you are using SCSS try ::ng-deep

::ng-deep {        .sample {         // style         color: green;       }    }

There's no need to wrap with <div class="someCssClassName">. Rather, to style an Angular Material element like the title of a 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 the CSS editor will reveal detail of how this CSS will render. In this example, <mat-card>...<mat-card-title>

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 <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;}

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