установка цвета ввода текста по угловой теме материала - PullRequest
Новая
       18

установка цвета ввода текста по угловой теме материала

0 голосов
/ 21 сентября 2018

Я действительно новичок в угловом материале.на самом деле началось около 30 минут назад!:)

, поэтому я могу установить основной, акцентный и предупреждающий цвета.

Теперь я пытаюсь установить цвет ввода текста в моей теме.

нетреальная идея, как это сделать правильно ...

Я проверил элемент mat-input и заметил, что цвет метки placeholder устанавливается следующими классами: mat-form-field-appearance-legacy и mat-form-field-label.

Я создал следующий файл темы: 

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-amber);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.

.mat-form-field-appearance-legacy .mat-form-field-label {
  color: white;
}
@include angular-material-theme($candy-app-theme);

это никак не повлияло на цвет заполнителя mat-input.

, поэтому я пытаюсь понять, как правильно установить цвета входов с тематикой.

Буду признателен за любые идеи по этому вопросу.

1 Ответ

0 голосов
/ 22 сентября 2018

Перед началом работы ознакомьтесь с руководством Настройка стилей компонентов .

В любом случае, вы должны использовать стили !important, поскольку ваши стили будут переопределены стилями Angular Material:

// ...
.mat-form-field-appearance-legacy .mat-form-field-label {
  color: white !important;
}
...