I'm using the latest angular material version(v16) and I'm trying to style the matInput(inside a mat-form-field) and I'm having some issues with the behaviour. I simply want to override the color of the input when I haven't touched. I also want to change the placeholder and mat-label color. What solutions do I have to only change the color of the border but not affect the behaviour of material component? I've found a solution with ng-deep that works partially, but the style remains applied even the inputs have error or is focused. It keeps this green color for border always, but if there are errors I want to have the border of red color, if it's focused I want to have the default color for focused(blue in this case). ::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; } Continue reading...
