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

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

Так выглядит указатель даты: https://imgur.com/YmJctem

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

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

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

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


angular angular8 themes angular7 angular-material-7
person szilard1996    schedule 10.06.2019    source источник
comment
взгляните: stackblitz.com/edit/angular-styling-datepicker   -  person Amit Baranes    schedule 10.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

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

  1. # P3 #
    # P4 #
    # P5 #

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

person Alexandru Ciprian Muresan    schedule 10.06.2019
comment
Да, я хотел бы изменить css, но я не нашел хороших ресурсов для изменения ТОЛЬКО css, не касаясь библиотеки материалов (файлы js / ts). - person szilard1996; 10.06.2019
comment
Таким образом, вы даже не трогаете исходную библиотеку материалов, потому что вы переопределите стили материалов в вашем угловом компоненте. Первоначальный стиль будет сохранен. - person Alexandru Ciprian Muresan; 10.06.2019