CODEWITHSUNDEEP
cssangularangular-material
flamant
flamant

Reputation: 783

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

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.

Upvotes: 1

Views: 7153

Answers (1)

user12251399
user12251399

Reputation:

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

Upvotes: 7

Related Questions