Настроить размер средства выбора даты Angular Material для Angular 6

Я хочу сбросить ширину и высоту средства выбора даты Angular Material в Angular 6.

Я проверил классы для элемента datepicker в chrome и использовал это, как показано ниже.

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

Когда я изменяю свойства в chrome, это отражается в пользовательском интерфейсе, но когда я добавляю его в код, оно не применяется к DatePicker.

Я использовал Datepicker в компоненте модели Angular Material.

Пожалуйста помоги.

Попробуйте поместить это внутрь :host ::ng-deep {}

Udi Mazor 29.07.2019 13:21
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
5 729
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Есть два способа применить этот css

  1. Добавьте этот же стиль в основной файл style.scss или style.css.

ИЛИ

  1. добавьте ::ng-deep перед вашим кодом стиля бывший:
::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;
}

Другие вопросы по теме