Overriding Material2 Style with Custom CSS

Question

I have Datepicker element in Angular. It is standard component from Material Design.

When I try to set own styles to this element, it does not work with property !important.

How to fix it, and how to change the default component's styles?

Example of code:

.mat-datepicker-toggle {
  margin-right: 10px !important;
}

Answer 1

Another option is to set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})

Then in your component css you can do exactly what you tried:

.mat-datepicker-toggle {
  margin-right: 10px !important;
}

Answer 2

You need to use ::ng-deep. In your component css, set your style to the following:

::ng-deep .mat-datepicker-toggle {
  margin-right: 10px !important;
}