css - 在材质组件中将组件特定样式设置为生成的 HTML

问题描述

我在组件中添加了一个无线电组：

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

这会在站点中呈现以下 HTML：

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

如何为以下元素指定组件范围样式：<label class="mat-radio-label" for="mat-radio-2-input">？

我试过这样的事情：

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

和

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

但是选择器是错误的。

在不全局设置样式的情况下访问这些节点和设置样式的正确方法是什么？有可能还是全局风格是唯一的方法？

标签： cssangularangular6

css - 在材质组件中将组件特定样式设置为生成的 HTML

问题描述

解决方案

推荐阅读