Setting component specific style to generated HTML in material component

Question

I have added a radio group to component:

<div class="auction-filter-wrapper">
  <mat-radio-group class="auction-filter" (change)="onChange($event)">
    <mat-radio-button class="auction-filter-button" value="0">Both</mat-radio-button>
    <mat-radio-button class="auction-filter-button" value="Bid">Bid</mat-radio-button>
    <mat-radio-button class="auction-filter-button" value="BuyNow">Buy Now</mat-radio-button>
  </mat-radio-group>
</div>

This renders the following HTML in site:

<div _ngcontent-c32="" class="auction-filter-wrapper">
  <mat-radio-group _ngcontent-c32="" class="auction-filter mat-radio-group" role="radiogroup">
    <mat-radio-button _ngcontent-c32="" class="auction-filter-button mat-radio-button mat-accent" value="0"
      ng-reflect-value="0" id="mat-radio-2"><label class="mat-radio-label" for="mat-radio-2-input">
        <div class="mat-radio-container">
          <div class="mat-radio-outer-circle"></div>
          <div class="mat-radio-inner-circle"></div>
          <div class="mat-radio-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="23"
            ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"></div>
        </div><input class="mat-radio-input cdk-visually-hidden" type="radio" id="mat-radio-2-input" tabindex="0" name="mat-radio-group-0">
        <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Both</div>
      </label></mat-radio-button>
    <mat-radio-button _ngcontent-c32="" class="auction-filter-button mat-radio-button mat-accent" value="Bid"
      ng-reflect-value="Bid" id="mat-radio-3"><label class="mat-radio-label" for="mat-radio-3-input">
        <div class="mat-radio-container">
          <div class="mat-radio-outer-circle"></div>
          <div class="mat-radio-inner-circle"></div>
          <div class="mat-radio-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="23"
            ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"></div>
        </div><input class="mat-radio-input cdk-visually-hidden" type="radio" id="mat-radio-3-input" tabindex="0" name="mat-radio-group-0">
        <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Bid</div>
      </label></mat-radio-button>
    <mat-radio-button _ngcontent-c32="" class="auction-filter-button mat-radio-button mat-accent" value="BuyNow"
      ng-reflect-value="BuyNow" id="mat-radio-4"><label class="mat-radio-label" for="mat-radio-4-input">
        <div class="mat-radio-container">
          <div class="mat-radio-outer-circle"></div>
          <div class="mat-radio-inner-circle"></div>
          <div class="mat-radio-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="23"
            ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"></div>
        </div><input class="mat-radio-input cdk-visually-hidden" type="radio" id="mat-radio-4-input" tabindex="0" name="mat-radio-group-0">
        <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Buy Now</div>
      </label></mat-radio-button>
  </mat-radio-group>
</div>

How do I specify component scoped styles for elements like: <label class="mat-radio-label" for="mat-radio-2-input"> ?

I have tried things like:

:host {
    .auction-filter-button {
        ::ngdeep {
            label {
                padding-left: 0 !important;
            }
        }
    }
}

and

:host {
    .auction-filter-button {
        label {
            padding-left: 0 !important;
        }
    }
}

But the selector is wrong.

What is correct way to access these nodes and style them without setting the style globally? Is it possible or is global style only way to do it?

Answer 1

Silly mistake. I was using ::ngdeep instead of ::ng-deep.