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

Question

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

Answer 1

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

Вы можете использовать ::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.Для этой цели @ angular / material / datepicker API предоставляет два ввода для 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 в папке вашего компонента с помощьютолько ваши собственные стили DatePicker и импортируйте его в style.css, чтобы все было организовано.

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

Answer 2

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

Answer 3

Вы можете использовать ng-deep селектор.Это давно устарело, но пока что не заменено чем-либо рабочей группой CSS.Многие разработчики все еще используют его, поскольку альтернативные способы также имеют свои недостатки.

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

  ::ng-deep yourcomponent{
    //custom css
  } 

Answer 4

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

::ng-deep mycomponent{
    //custom css
}

Answer 5

Другое простое решение для этого - использовать Просмотр инкапсуляции как ни один на компоненте один, поэтому вы можете добавить свои стили в one.component.scss, не добавляя их в styles.scssкоторый мог бы потенциально перезаписать его для всех компонентов.