Я хочу сбросить ширину и высоту средства выбора даты Angular Material в Angular 6.
Я проверил классы для элемента datepicker в chrome и использовал это, как показано ниже.
.mat-datepicker-content .mat-calendar{
width: unset !important;
height: unset !important;
}
Когда я изменяю свойства в chrome, это отражается в пользовательском интерфейсе, но когда я добавляю его в код, оно не применяется к DatePicker.
Я использовал Datepicker в компоненте модели Angular Material.
Пожалуйста помоги.
Есть два способа применить этот css
ИЛИ
::ng-deep.mat-datepicker-content .mat-calendar{
width: unset !important;
height: unset !important;
}
Чтобы отредактировать материал в классе css сборки, вы должны использовать ::ng-deep
, как показано ниже.
::ng-deep .mat-datepicker-content .mat-calendar{
width: 100px !important;
height: 100px !important;
}
Обратите внимание, что он будет работать только с определенной инкапсуляцией. см. ниже комментарий от официальный сайт.
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.
Всегда рекомендуется использовать свой собственный класс в иерархии CSS, чтобы стиль не вытекал за пределы компонента. Смотри ниже:
::ng-deep .mat-datepicker-content .mat-calendar .your-custom-class{
width: 100px !important;
height: 100px !important;
}
Попробуйте поместить это внутрь :host ::ng-deep {}