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.

Answer 1

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