Customize Angular Material Datepicker size for Angular 6

Question

I want to reset the width and height of Angular Material datepicker in Angular 6.

I have checked the classes for the datepicker element in chrome and used that as below

.mat-datepicker-content .mat-calendar{
    width: unset !important;
    height: unset !important;
}

When I change properties in chrome it is reflected in UI but when I add it in code it is not applied on DatePicker.

I have used Datepicker in Angular Material Model Component.

Please help.

Answer 1

There are two ways to apply this css

1. Add this same style in main style.scss or style.css

OR

2. add ::ng-deep before your style code ex:

::ng-deep.mat-datepicker-content .mat-calendar{
    width: unset !important;
    height: unset !important;
}

Answer 2

To make edit on material in-build css class, you have to use ::ng-deep like below.

::ng-deep .mat-datepicker-content .mat-calendar{
    width: 100px !important;
    height: 100px !important;
}

Please note that it will work with specific encapsulation only. see below comment from official site.

Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section.

It is always recommended to use your own class as well in css hierarchy so that style does not bleed out side of component. see below:

::ng-deep .mat-datepicker-content .mat-calendar .your-custom-class{
    width: 100px !important;
    height: 100px !important;
}