Настроить угловой материал

У меня есть два компонента с именами one.component.html и two.components.html. Я попытался настроить средство выбора даты материала Angular только для одного компонента и оставить другой компонент для выбора даты Angular Stock. Если я напишу собственный код CSS в one.component.css, он не сработает. Итак, я должен писать в Style.css. Но запись в Style.css позволит настроить оба компонента. Как указать настройку в другом компоненте?


angular angular-material
person Chris    schedule 30.04.2019    source источник
comment
Добавьте селектор фильтрации в то, что вы сделали в styles.css. например .custom и добавьте этот класс к компоненту, который вы хотите настроить.   -  person Antoniossss    schedule 30.04.2019
comment
github.com/angular/components/blob/master/ руководства/   -  person Robin Dijkhof    schedule 16.05.2019

Ответы (4)


arrow_upward
13
arrow_downward

комбинатор потомков, проникающий в тень (устаревший)

Вы можете использовать ::ng-deep в определении CSS соответствующий компонент, чтобы заставить ваш стиль перемещаться по дереву дочерних компонентов во все представления дочерних компонентов, например:

/* two.component.css */
::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){
  border-color:darkblue;
}

Пользовательские классы CSS

В качестве альтернативы вы можете назначить разные классы CSS для каждого DatePicker, которые затем стилизуются с помощью style.css. API @angular/material/datepicker предоставляет для этой цели два входа в mat-datepicker:

panelClass Классы, которые будут переданы в панель выбора даты. Поддерживает тот же синтаксис, что и функция ngClass dateClass, которую можно использовать для добавления пользовательских классов CSS к датам.

Используя это, ваш шаблон OneComponent теперь может выглядеть так:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker panelClass="datepickerOne"></mat-datepicker>
</mat-form-field>

и соответствующий стиль в style.css, например:

.datepickerOne .mat-calendar-body-today:not(.mat-calendar-body-selected){
  border-color: darkgreen;
}

Если вы выберете решение с пользовательским классом CSS, я бы посоветовал вам создать второй файл CSS в папке вашего компонента только с вашими пользовательскими стилями средства выбора даты и импортировать его в свой style.css, чтобы все было организовано.

Я создал Stackblitz, чтобы вы могли ознакомиться с упомянутые возможности.

person coreuter    schedule 21.05.2019

arrow_upward
4
arrow_downward

Лучшей архитектурой было бы создание файла datepicker.scss в папке assets/scss с вашим пользовательским SCSS. И импорт внутри компонентов, которые вы хотите, имеет индивидуальный стиль datepicker. @import "src/assets/scss/datepicker.scss"; Таким образом, вы можете легко реализовать свои проекты.

person Sami Haroon    schedule 15.05.2019
comment
Разве это не то же самое, что и использование CSS-файла компонента, который, по словам @Chris, не работает. В этом случае определения правил внутри css-файла компонента или импорта из scss недостаточно, потому что это влияет только на шаблон компонента, если только вы не используете комбинатор ng-deep shadow piercing. - person talhature; 15.05.2019

arrow_upward
3
arrow_downward

Вы можете использовать селектор ng-deep. Он давно объявлен устаревшим, но рабочая группа CSS пока ничем его не заменила. Многие разработчики до сих пор используют его, так как альтернативные способы тоже имеют свои недостатки.

Внутри файла css вашего компонента вы можете иметь что-то вроде этого:

  ::ng-deep yourcomponent{
    //custom css
  }
person talhature    schedule 15.05.2019

arrow_upward
2
arrow_downward

Вы все еще можете использовать это

::ng-deep mycomponent{
    //custom css
}
person Deepak kansal    schedule 20.05.2019