如何修改Angular Material输入框背景色？原主题样式已移除

你之前的CSS代码无效，大概率是Angular组件视图封装导致样式无法穿透，或者选择器优先级不够。以下是几种可行的解决方法：

方法一：利用全局样式文件 #

把样式写在项目根目录的styles.css（或styles.scss）里，全局样式不受组件封装限制：

/* 基础状态背景透明 */
.mat-form-field.mat-form-field-appearance-fill .mat-form-field-flex {
  background: transparent !important;
}

/* 覆盖聚焦、hover状态的背景色 */
.mat-form-field.mat-form-field-appearance-fill.mat-focused .mat-form-field-flex,
.mat-form-field.mat-form-field-appearance-fill:hover .mat-form-field-flex {
  background: transparent !important;
}

方法二：关闭组件视图封装 #

在你使用输入框的组件里，关闭Angular的视图封装，让组件内的CSS能作用到Material组件：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-login', // 替换成你的组件选择器
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class LoginComponent { }

之后在该组件的CSS文件里写你之前的样式即可生效。

方法三：通过Material主题系统自定义（推荐） #

如果想遵循Material的主题规范，避免用!important，可以在主题文件（比如theme.scss）里自定义字段背景色：

@use '@angular/material' as mat;

// 定义自定义主题
$custom-theme: mat.define-light-theme((
  color: (
    background: (
      field: transparent, // 设置输入框背景为透明
    ),
  )
));

// 应用主题到所有组件
@include mat.all-component-themes($custom-theme);

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