Как изменить цвет границы поля mat-form-field в угловом материале

Question

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

<mat-form-field id="test" appearance="outline">
  <mat-label class="test2">Outline form field</mat-label>
  <input matInput placeholder="name">
</mat-form-field>

Существуют варианты для изменения размера шрифта, но я не могу определить цвет:

mat-form-field.mat-form-field {
    font-size: 16px;
    color: red;
}

Атрибут цветаздесь ничего не меняется.

Спасибо, что нашли время.

Answer 1

Перейдите в Node_modules -> @angular -> материал -> prebuilt-themes -> indigo-pink.css -> Найдите контур mat-form-filed-Appearance, затем измените свой цвет

Answer 2

Существует способ изменить цвета стилей угловых материалов, не прибегая к устаревшим ::ng-deep.Увеличьте специфичность селектора и поместите стили в основную / корневую таблицу стилей.

Итак, если у вас есть следующее в вашем компоненте:

<form>
  <mat-form-field class="my-form-field">
    <input matInput placeholder="My Input">
  </mat-form-field>
</form>

Вы можете добавить следующие стили к вашей основной таблице стилей:

/** Overrides underline color **/
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-underline,
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-ripple,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-underline,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-ripple {
    background-color: white;
}

/** Overrides label color **/
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-label,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-label {
    color: white;
}

/** Overrides caret & text color **/
.my-form-field.mat-form-field-appearance-legacy .mat-input-element {
    caret-color: white;
  color: white;
}

StackBlitz Demo

Это не рекомендуемый способ стилизации всего приложения, для этого вам просто нужно создать собственную тему .Но это может иметь смысл для одноразового компонента, например, когда ваш цвет фона конфликтует с доступными цветами темы.

Answer 3

Слишком поздно, но, тем не менее, я верю, что это будет справедливо для тех, кто ищет его:

Если вы заметили, что в поле mat-form-field относительно границы есть два различных поведения.

Он имеет один цвет рамки при наведении на него и при нажатии на него (конечно, если вы изменили внешний вид до этого)

Например, если вы используете:

<mat-form-field class="example-chip-list" [color]="primary" appearance="outline"> </mat-form-field>

При наведении на него вы увидите один цвет, но при нажатии на него цвет границы, который он примет, будет из:

[color] = "primary"

Если вы хотите изменить его, следуйте указаниям углового материала, предусмотренного при укладке.Если вы хотите изменить цвет при наведении на него (так как :: ng-deep устарел), вам нужно добавить ViewEncapsulation в ваш компонент:

@Component({
...
  encapsulation: ViewEncapsulation.None
})

и добавить следующее в свой стильclass:

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: white;
}

Это изменит цвет элемента при наведении на него курсора.

PS, если у вас также есть суффикс или элемент префикса для переопределения этого цвета, просто добавьте это:

  mat-form-field.mat-form-field {
    color:white;
  }

PS, если вы хотите изменить цвет рамки, когда элемент не находится над ним или не коснулся, это поможет:

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: black;
}

ОБНОВЛЕНИЕ 2 /5/2019:

Чтобы изменить основной / вторичный цвет, вы можете использовать http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5, чтобы создать свой собственный и применить его в Theming.

Answer 4

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

<mat-form-field> имеет цветсвойство, которое может быть установлено в primary, accent или warn.Это позволит установить цвет подчеркивания поля формы и плавающей метки в зависимости от цвета темы вашего приложения.

---

Примечание. Вы можете использовать CSS-хаки , используя ::ng-deep, но это в конечном итоге будет признано устаревшим.Или вы можете возиться с encapsulation: ViewEncapsulation.None в объявлении вашего компонента, чтобы избежать необходимости использовать ::ng-deep, но прочитать об этом , потому что это вызывает другие проблемы со стилем.

::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {
  background-color: blue !important;
}