Angular中Mat-Datepicker容器背景色无法改为纯白色的解决方法

Angular Material的mat-form-field组件默认带有烟白色背景，要改为纯白色需要覆盖其内部的默认样式。由于Angular的视图封装机制，你需要使用穿透样式或者全局样式来修改，以下是具体方案：

组件内修改（推荐） #

在你的组件CSS文件中添加以下样式，通过::ng-deep穿透视图封装，精准覆盖目标元素的背景色：

.grid-item {
  flex: 1;
  margin-bottom: 20px;
  padding: 10px;
}

.form {
  height: 40%;
  width: 90%;
}

.dateinput {
  width: 85%;
  background-color: #ffffff !important;
}

/* 覆盖mat-form-field的填充背景 */
::ng-deep .form .mat-form-field-fill {
  background-color: #ffffff !important;
}

/* 覆盖mat-form-field的轮廓内背景 */
::ng-deep .form .mat-form-field-outline {
  background-color: #ffffff !important;
}

/* 覆盖聚焦状态下的轮廓背景 */
::ng-deep .form.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  background-color: #ffffff !important;
}

全局样式修改 #

如果不想使用::ng-deep，可以在项目根目录的styles.scss（或styles.css）中添加以下样式，无需穿透即可生效：

.form .mat-form-field-fill {
  background-color: #ffffff !important;
}

.form .mat-form-field-outline {
  background-color: #ffffff !important;
}

.form.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  background-color: #ffffff !important;
}

说明 #

• .mat-form-field-fill控制输入区域的填充背景
• .mat-form-field-outline控制轮廓边框内的背景
• 聚焦状态下的.mat-form-field-outline-thick需要单独覆盖，避免聚焦时背景色回退
• 使用!important确保自定义样式优先级高于Material的默认样式

内容的提问来源于stack exchange，提问作者Rohit517