So gestalten Sie eckiges Material mat-form-field/matInput ⇐ CSS

[Anonymous]

Ich verwende die neueste Angular-Material-Version (v16) und versuche, den matInput (innerhalb eines Mat-Form-Felds) zu formatieren, und ich habe einige Probleme mit dem Verhalten. Ich möchte einfach die Farbe der Eingabe überschreiben, wenn ich sie nicht berührt habe. Ich möchte auch die Platzhalter- und Mattenbeschriftungsfarbe ändern.
Welche Lösungen habe ich, um nur die Farbe des Rahmens zu ändern, aber nicht das Verhalten der Materialkomponente zu beeinflussen?
Ich habe mit ng-deep eine Lösung gefunden, die teilweise funktioniert, aber der Stil bleibt angewendet, selbst wenn die Eingaben fehlerhaft sind oder fokussiert sind. Es behält immer diese grüne Farbe für den Rand bei, aber wenn es Fehler gibt, möchte ich den Rand in roter Farbe haben, wenn er fokussiert ist, möchte ich die Standardfarbe für den Fokus haben (blau in diesem Fall).

Code: Select all

::ng-deep .mdc-notched-outline__leading {
border-color: green !important;
}
::ng-deep .mdc-notched-outline__notch {
border-color: green !important;
}
::ng-deep .mdc-notched-outline__trailing {
border-color: green !important;
}