如何更改 Angular mat-checkbox 组件的标签字体大小？

问题描述 投票：0回答：1

我正在尝试更改 mat-checkbox 标签的字体大小。我似乎没有尝试任何工作，因为它始终被组件的默认样式覆盖：

  1. ！重要
  2. ::ng-深
  3. 在styles.scss中设置全局样式

<mat-checkbox [(ngModel)]="reportOption.AllSelected" *ngIf="reportOption.SelectAll" (change)="onSelectAllChange($event, reportOption)" style="margin-left:5px;" class="custom-checkbox">Select All</mat-checkbox>

示例问题

css angular angular-material angular-forms
1个回答
0
投票

我在全局样式表中所做的类似于下面的内容（从我的真实代码中提取，假设我有 

<body class="my-app">...</body>
）并用 scss 编写。我覆盖了 Angular Material 中定义的类的样式，其中一些与我在此处演示的复选框相关：

.my-app {
    .mat-pseudo-checkbox-checked {
        background-color: #000;
    }

    .mat-checkbox-frame {
        border-radius: 0 !important;
    }

    .mat-checkbox-checked,
    .mat-checkbox-indeterminate {
        .mat-checkbox-background {
            background-color: #000;
            border-radius: 0 !important;
        }
    }

    .mat-mdc-checkbox {
        --mdc-checkbox-selected-checkmark-color: #ffffff;
        --mdc-checkbox-selected-icon-color: #000000;
        --mdc-checkbox-selected-focus-icon-color: #000000;
        --mdc-checkbox-selected-hover-icon-color: #000000;
        --mdc-checkbox-selected-pressed-icon-color: #000000;
        --mdc-checkbox-state-layer-size: 0;
        --mdc-checkbox-unselected-focus-state-layer-opacity: 0;

        &.mat-mdc-checkbox-disabled {
            .mdc-checkbox {
                .mdc-checkbox__background {
                    --mdc-checkbox-disabled-selected-icon-color: transparent;

                    .mdc-checkbox__checkmark {
                        @include color(inherit);
                    }
                }
            }
        }

        .mdc-checkbox {
            .mdc-checkbox__background {
                @include square(16px);
            }
        }

        .mdc-form-field {
            --mdc-typography-body2-letter-spacing: normal;
        }
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.