Как изменить тему Angular Material Datepicker?

Question

Я хотел бы изменить тему стандартного инструмента выбора угловых материалов.Я не смог найти никакой полезной информации об этом вопросе (я нашел только для AngularJS или старого Angular Material).Я использую CSS по умолчанию, но я изменил его в соответствии со своими предпочтениями.

Вот как выглядит средство выбора даты: https://imgur.com/YmJctem

Я бы хотел изменить его на этот тип: https://imgur.com/oVlwCDK

Я хочу использовать средство выбора даты,потому что я реализовал некоторый код, и он работает только на материале DatePicker.

Возможно, это звучит забавно, но я хочу добавить дизайн материала Datepicker в Angular Material Datepicker.

Спасибо за вашу помощь / совет!

Answer 1

Если вы сможете предоставить нам плунжер, вам будет проще.

Чтобы достичь желаемого, вам необходимо переопределить классы CSS угловых материалов по умолчанию. После очень быстрого просмотра вы увидите (используя inspect), что у каждого элемента есть класс css, такой как 'mat-calendar-header'. У вас есть два варианта:

1. Использование псевдокласса :: ng-deep. Если вы хотите применить собственный стиль к этому классу, вы можете добиться этого, добавив псевдокласс :: ng-deep перед классом углового материала css, который вы хотите переопределения. Этот стиль можно добавить в CSS-файл для угловых компонентов.

   Применение псевдокласса :: ng-deep к любому правилу CSS полностью отключает инкапсуляцию вида для этого правила. Любой стиль с применением :: ng-deep становится глобальным стилем.

   Пример: ::ng-deep .mat-calendar-header{background-color: red;}

2. Переопределить угловой класс материала css в глобальном файле styles.css