Стиль ввода Angular Material 2 (один элемент/страница)

Можно ли изменить стиль (цвет текста, цвет заполнителя, цвет подчеркивания и т. д.) для одного элемента ввода? Я могу стилизовать оставшуюся часть в соответствии с глобальным стилем, но что, если вы хотите установить тему специально для одной страницы или для одного элемента управления? Какова наилучшая практика для этого?

Например, как стилизовать этот блок, чтобы цвета заполнителя, текста и акцентов были пользовательскими?

<md-input-container>
  <input mdInput placeholder="Email address">
</md-input-container>

angular angular-material2
person Luke    schedule 02.04.2017    source источник
comment
вы должны уметь обращаться с темами в материале.   -  person Aravind    schedule 02.04.2017
comment
@Roman C Давайте помнить, что SO — это ответы на вопросы и распространение знаний, а не просто сообщение людям, что это невозможно.   -  person ender    schedule 03.04.2017
comment
Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. В том виде, в котором он сейчас написан, трудно точно сказать, о чем вы спрашиваете. См. страницу «Как спросить», чтобы получить помощь в разъяснении этого вопроса. @эндер   -  person Roman C    schedule 03.04.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете определить пользовательскую тему для каждого материального компонента, и вы должны иметь возможность переопределить свою базовую тему для рассматриваемого компонента следующим образом:

@import '~/@angular/material/input/input-theme'
.custom-input {
  @include mat-input-theme($custom-input-theme)
}

Затем просто добавьте класс в файл <md-input-container>.

Кроме того, если вы определяете пользовательский класс в таблице стилей компонента, убедитесь, что для инкапсуляции установлено значение none:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
person ender    schedule 03.04.2017