Изменение цвета входного контура поля формы Angular Material при активном поле формы

Question

Постановка задачи: Я использую свойство Angular material mat-form-field.Я поставил внешний вид поля формы как контур.Я пытаюсь изменить цвет границы ввода при выборе входа.

Ожидаемое поведение.Цвет границы поля ввода должен меняться при выборе ввода.Я хочу изменить цвет контура на черный, когда поле формы активно.

Текущее поведение: в данный момент отображается основной цвет по умолчанию для углового материала, когда поле формы активно.

Это все мои зависимости

{
  "dependencies": {
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "aws-amplify": "^1.1.6",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

Answer 1

Приведенный ниже CSS должен позволять вам переопределять цвета.

/* default and hover color */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: red;
}

/* focused color */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: green;
}

/* floating label color */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-label { 
    color: green; 
}

Answer 2

MatFormField использует свойство цвета темы, поэтому вы можете указать активный цвет как основной, акцент или предупреждение.По умолчанию это основной.Например, чтобы перейти от основного цвета по умолчанию к цвету акцента темы:

<mat-form-field color="accent">

Если в качестве активного цвета используется черный цвет, как образец для всего приложения, я предлагаю вам соответствующим образом настроить тему приложения и сделать черный либоваш основной или акцентный цвет, чтобы его могли использовать все компоненты углового материала.Инструкции по тематике можно найти здесь .

Если вы хотите использовать в приложении только темы MatFormField, вы можете создать тему с черным в качестве основного или акцентного цвета и применить ее только к MatFormField.,Тогда все поля формы в вашем приложении будут автоматически окрашены в соответствии со специальной темой и будут по умолчанию настроены на любой основной цвет, указанный в этой теме.Подробности можно найти в этом посте .

Преимущество использования их для этого состоит в том, что это гарантирует результат для всех аспектов окраски темы и будет работать с любым видом поля формы.Вы выбираете (в случае, если вы хотите изменить или использовать сочетание набросков и заполнить, например).Он также позволяет применять ту же тему к другим компонентам, таким как MatSelect и MatChipList, которые можно использовать в MatFormField, и MatAutocomplete, который присоединяется к входу MatFormField, так что цвета выбранных элементов и других элементов темы будут соответствовать теме поля формы.