Angular Material-单选按钮标签的字体大小太大

Question

从这张图片可以看到，mat-radio标签的字体大小与其他所有字体的字体大小相距甚远。

这是相关的模板部分：

<mat-radio-group formControlName="choice">
    <div class="col-auto">
        <mat-radio-button value="1">Ogni secondo</mat-radio-button>
    </div>
    <div class="w-100"></div>
    <div class="col-auto">
        <mat-radio-button value="2">Ogni</mat-radio-button>
        <mat-form-field>
           <mat-select formControlName="every">
              <mat-option *ngFor="let i of seconds" [value]="i + 1">
                 {{ i + 1 }}
              </mat-option>
           </mat-select>
        </mat-form-field>
        secondo/i partendo dal secondo
    ...

我已经尝试使用自定义排版，使用其SASS mixins和功能，如排版文档部分所述。已经尝试过，这意味着我尝试按照https://material.angular.io/guide/typography

在mat-core导入中注入自定义排版

有什么主意吗？

编辑：为类.mat-radio-label-content设置自定义字体大小会产生以下结果：

Answer 1

您必须在材质的CSS本身中更改字体大小。您无法使用在自己的CSS文件中编写的CSS覆盖它。

Answer 2

::ng-deep .mat-radio-outer-circle {
    height: 15px !important;
    width: 15px !important;
    top: 3px !important;
    border-width: 1px !important;
}
::ng-deep .mat-radio-inner-circle{
    height: 15px !important;
    width: 15px !important;
    top: 3px !important;
}

您可以通过单选按钮设置外圆和内圆的高度，宽度和顶部。这对我有用

Answer 3

您必须为Angular Material包含一个默认主题，因此该主题正在使用单选标签的默认高度。

“ mat-radio-label-content” =>这是您可以设置字体大小的元素的类名。

如果本机不允许，则使用：ng-deep。