Angular中修改Material Design复选框勾选色与输入框下划线为绿色

方法一：全局主题修改（统一项目风格） #

Angular Material基于主题系统运作，直接自定义全局主题可以一次性修改所有组件的默认颜色：

1. 打开项目根目录的styles.scss（或全局样式文件），添加以下SCSS代码：

@import '~@angular/material/theming';

// 定义自定义绿色调色板（可根据需求调整色调）
$custom-green-palette: mat-palette($mat-green, 500, 300, 700);
// 构建自定义主题
$custom-theme: mat-light-theme((
  color: (
    primary: $custom-green-palette,
    accent: $custom-green-palette, // 复选框勾选标记通常使用accent色
  )
));

// 应用主题到所有Angular Material组件
@include angular-material-theme($custom-theme);

这样所有Material组件的主色调、强调色都会变成绿色，包括输入框下划线、复选框勾选标记。

方法二：局部组件修改（仅针对特定元素） #

如果只需要修改部分组件的颜色，可以利用你代码中已有的green-input类，结合视图穿透（::ng-deep）来覆盖默认样式：

1. 修改输入框下划线/标签颜色

在组件的样式文件（如xxx.component.scss）中添加：

// 输入框默认下划线颜色
:host ::ng-deep .green-input .mat-form-field-underline {
  background-color: #4caf50;
}

// 输入框点击时的涟漪效果颜色
:host ::ng-deep .green-input .mat-form-field-ripple {
  background-color: #4caf50;
}

// 输入框聚焦时的下划线与标签颜色
:host ::ng-deep .green-input.mat-focused .mat-form-field-underline {
  background-color: #4caf50;
}
:host ::ng-deep .green-input.mat-focused .mat-form-field-label {
  color: #4caf50;
}

2. 修改复选框勾选标记颜色

给目标复选框添加green-checkbox类（如<mat-checkbox class="green-checkbox">选项</mat-checkbox>），然后在样式文件中添加：

// 复选框勾选/半选状态的背景色
:host ::ng-deep .green-checkbox .mat-checkbox-checked.mat-accent .mat-checkbox-background,
:host ::ng-deep .green-checkbox .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #4caf50;
}

// 复选框默认边框颜色
:host ::ng-deep .green-checkbox .mat-checkbox-frame {
  border-color: #4caf50;
}

你的代码示例（已调整类名引用） #

<div class="label-input-block top-centre-form">
  <mat-form-field class="green-input"
    name="gadsCustomerId"
    formControlName="gadsCustomerId"
    id="gadsCustomerId">
    <mat-label>Select accounts</mat-label>
    <mat-select [formControl]="selectedCidList" multiple>
      <mat-option *ngFor="let cid of customer_list" [value]="cid.id">
        {{ cid.account_name }} [{{ cid.id }}]
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<ng-template matStepLabel>Configure date range</ng-template>
<div class="label-input-block top-centre-form">
  <mat-form-field class="green-input">
    <mat-label>From Days Ago</mat-label>
    <input type="number"
      class="green-input"             
      name="fromDaysAgo"
      formControlName="fromDaysAgo"
      id="fromDaysAgo"
      matInput
    />
  </mat-form-field>
</div>
<!-- 示例复选框 -->
<mat-checkbox class="green-checkbox">我已阅读协议</mat-checkbox>

效果说明 #

修改后，输入框的下划线（默认、聚焦状态）、标签聚焦颜色，以及复选框的勾选标记、边框都会变为绿色，与你提供的参考图（默认紫色→修改后绿色）效果一致。

内容的提问来源于stack exchange，提问作者Elad Ben-David