Персонализирайте Angular Material

Имам два компонента, наречени one.component.html и two.component.html. Опитах се да персонализирам Angular material datepicker само за един компонент и да оставя друг компонент да има Angular Stock datepicker. Ако напиша персонализиран 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. @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 файл в папката с компоненти само с вашите персонализирани стилове за избор на дата и да импортирате този във вашия style.css, за да поддържате всичко организирано.

Създадох Stackblitz, за да разгледате споменатите възможности.

person coreuter    schedule 21.05.2019

arrow_upward
4
arrow_downward

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

person Sami Haroon    schedule 15.05.2019
comment
Не е ли това всъщност същото с използването на css файла на компонента, за който @Chris заяви, че не работи. Дефинирането на правилата в css файла на компонента или импортирането от scss не е достатъчно в този случай, защото засяга само шаблона на компонента, освен ако не използвате ng-deep shadow piercing combinator. - 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