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

Question

это моя пользовательская форма:

У меня проблема, цвет поля ввода белый, а фон такой же белый.Я не смог нигде найти Как изменить цвет поля ввода.

Что такое атрибут css для цветного текста?

это мой шаблон:

<div class="example-container" style="color:red">
    <mat-form-field>
      <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
      <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  new contact

Answer 1

Here is some most common properties of angular material v7

/* input color class */
::ng-deep input.mat-input-element {
  color: #484a4c;
}

/* Change label color on focused */
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  color: #50d0fb !important;
}

/* underline border color on focused */
::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple{
  background-color: #50d0fb !important;
}

Answer 2

@ JS правильно, если вы не включили тему в свое приложение, но если вы заинтересованы в настройке цветовых свойств поля ввода -

Для изменения цвета заполнителя (в данном случае 'введите '), вы можете изменить' цвет 'из класса ниже -

.mat-form-field-empty.mat-form-field-label {
    color: green;
}

Для изменения цвета подчеркивания, когда он выделен -

.mat-form-field-underline {
    background-color: green;
}

, вам нужно будет включить этот фрагмент кода вstyles.scss (или styles.css).

Answer 3

спасибо, я бы работал с пользовательским css напрямую, я использую меньше и Visual Studio компилирует css.

это мой style.less

@import 'my.css';

Я разветвил свой.css в файле: @angular\material\prebuilt-themes\purple-green.css

.mat-form-field-empty.mat-form-field-label {
    background: green;
    color:purple;
}

.mat-form-field-underline {
    background-color: green;
    color:blue;
}

::ng-deep .mat-form-field{
    color:red
}

//css @angular\material\prebuilt-themes\purple-green.css in at bottom...

Это результат:

текст не фиолетовый,зеленый фон в порядке

Answer 4

Применяли ли вы цветовую тему к своему проекту: как включить тему , например, добавьте ее в ваши styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Также важно Угловой материалРуководство по темам

Материал на основе цветовой палитры решает, какой цвет следует применять.Вы можете настроить его, как описано в ссылках.

В качестве последнего варианта вы можете перезаписывать стили (не рекомендуется), используя css-селекторы.Вы можете отладить свое приложение в браузере, чтобы узнать, какой css-селектор использовать.В вашем случае я думаю, что вы можете использовать:

.mat-form-field

Или, если это не работает, используйте:

::ng-deep .mat-form-field