how to change the css of angular material checkbox of mat-checkbox in an angular component

Question

I work on an angular 10 application.

I have a component having a template containing an angular material mat-checkbox. Inspecting the browser page, the checkbox has the following class

.mat-checkbox-inner-container {
    display: inline-block;
    height: 16px;
    line-height: 0;
    margin: auto;
        margin-right: auto;
        margin-left: auto;
    margin-right: 8px;
    order: 0;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    width: 16px;
    flex-shrink: 0;
}

I want to move the checkbox 5px down. My component has its proper scss file in which I apply the following class

  .mat-checkbox-inner-container {
    top: 5px !important;
  }

But it does not work. How can this be done and at the same time, if you can give me a detail explanation, thank you.

When I add manually the "top: 5px !important;" property in .mat-checkbox-inner-container class in the browser , it works.

user12251399 · Accepted Answer · 2021-02-11 20:06:20Z

7

https://angular.io/guide/component-styles

Try `

::ng-deep {
.mat-checkbox-inner-container {
    top: 5px !important;
  }
}

`

But it's not a good practice to use ng-deep.

Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style.

If you want to overwrite Material styles then write them at global level in the styles.scss file

answered Feb 11, 2021 at 20:06

user12251399

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to change the css of angular material checkbox of mat-checkbox in an angular component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related