Html 不能以Angular 更改输入的S边框 colored颜色

我try 了所有我能找到的方法来更改垫子输入中的笔划 colored颜色 ，但 colored颜色 仍然是紫色.字体的 colored颜色 完全改变了，但是边界线却没有.我能用这个做什么？

以下是html:

<div class="login-page">
    <h2>Login</h2>
    <div id="form">
        <form [formGroup]="loginForm">
            <div class="justify-content-center">
                <mat-form-field class="mffield" appearance="outline">
                    <mat-label>Username</mat-label>
                    <input matInput formControlName="username">
                </mat-form-field>
            </div>
            
            <div class="justify-content-center">
                <mat-form-field class="mffield" appearance="outline">
                    <mat-label>Password</mat-label>
                    <input type="password" matInput formControlName="password">
                </mat-form-field>
            </div>

            <div id="controls" class="row">
                <button style="width: 20%;" [disabled]="loginForm.invalid" (click)="submit()" mat-flat-button color="primary">
                    Login
                </button>
            </div>
        </form>
    </div>
</div>

以下是css:

...
  
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: red !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: red !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: red !important;
}

我试过这个代码

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: red !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: red !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: red !important;
}

大概是这样的:

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

但这对我不起作用.