Question 386297 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I change the label font-size of an Angular mat-checkbox component?

I’m attempting to change the fontsize of mat-checkbox’s label. Nothing I seem to attempt works as it’s consistently being overriden by the component’s default styles:

  1. !important
  2. ::ng-deep
  3. Setting global style in 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>

Example problem

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This was how I was able to get it to work:

        ::ng-deep .mdc-label {
      font-size: 16px;
      font-family: Montserrat, sans-serif;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .5px;
   }

  2. 0

    What I did in my global stylesheet was something like below (extracted from my real code, assuming I have <body class="my-app">...</body>) and written in scss. I overwrite styles of classes defined in Angular Material, some of them related to checkbox I demonstrate here:

    .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;
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search