如何全局设置Angular Material mat-card背景色？CSS代码未生效

嘿，我之前也踩过这个坑！Angular Material的组件自带样式优先级挺高的，直接写mat-card { background:pink }经常会被默认样式压下去，给你几个实用的解决办法：

• 提升样式优先级（推荐先试这个）
  用::ng-deep穿透Angular的视图封装机制，让你的全局样式能覆盖Material组件的默认样式。在styles.css里这么写：

  ::ng-deep mat-card {
    background: pink;
  }
  

  如果还是不生效，可以加上!important（尽量少用，但实在没办法时能用）：

  ::ng-deep mat-card {
    background: pink !important;
  }
  

• 使用更具特异性的CSS选择器
  单纯的标签选择器优先级不够，你可以给选择器加一层父级来提高权重，比如：

  body mat-card {
    background: pink;
  }
  

  或者直接使用Material组件自带的类名：

  .mat-card {
    background: pink;
  }
  

• 检查全局样式文件的加载顺序
  打开你的angular.json文件查看styles数组配置，确保你的styles.css是在Angular Material的主题样式之后引入的，比如：

  "styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css"
  ]
  

  样式文件按加载顺序生效，后面的样式会覆盖前面的，把自己的全局样式放在Material主题之后，才能确保你的样式能覆盖默认主题样式。

• 自定义Material主题（适合批量修改组件样式）
  如果需要统一调整多个Material组件的样式，自定义主题会更规范。你可以在主题文件里添加针对mat-card的配置：

  @import '@angular/material/theming';
  
  // 定义基础主题
  $app-primary: mat-palette($mat-indigo);
  $app-accent: mat-palette($mat-pink);
  $app-warn: mat-palette($mat-red);
  $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
  
  // 应用主题并自定义mat-card背景色
  @include angular-material-theme($app-theme);
  .mat-card {
    background: pink;
  }
  

  记得把这个主题文件引入到angular.json的styles数组中。

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