如何将style.css放在Angular Material添加的style标签之后覆盖默认样式

你遇到的样式覆盖问题，本质是Angular Material默认会在运行时，将你项目中用到的组件的样式动态注入到HTML head标签的末尾，这些动态插入的<style>标签优先级高于提前加载的静态styles.css，所以相同选择器下Material的默认规则会覆盖你的自定义规则。那些带sourceMappingURL的注释是CSS源映射标识，仅用于开发环境下的样式调试，和动态样式注入逻辑无关。

解决方案 #

方案1：提升自定义规则的选择器优先级（最简单快速） #

不需要加!important，只需要给你的自定义选择器叠加更高的优先级即可，例如：

// 在_theme.scss中修改规则如下
body .mat-fab {
   border-radius: 3px;
}

叠加了body选择器后，优先级高于Material默认的单类选择器规则，会优先生效。

方案2：禁用Angular Material的自动样式注入（最彻底） #

因为你已经通过@include mat.all-component-themes($wb-theme);全局引入了所有Material组件的样式，完全可以关闭自动样式注入功能，避免重复注入样式导致的覆盖问题。
配置方式如下：
在你的根模块（通常是app.module.ts）中注入MAT_THEME_OPTIONS配置：

import { MAT_THEME_OPTIONS } from '@angular/material/core';

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: MAT_THEME_OPTIONS,
      useValue: { disableStyleInjection: true }
    }
  ]
})
export class AppModule { }

配置完成后，Angular Material就不会再动态插入<style>标签，你写在all-component-themes之后的自定义样式会正常生效。

方案3：通过Material主题系统自定义组件样式（最规范） #

对于按钮这类组件，Angular Material提供了专门的主题定制API，可以直接在主题定义中修改组件的默认样式，和全局主题体系打通，不需要手动覆盖样式：

// 定义完全局主题后，单独定义按钮的自定义主题
$custom-button-theme: mat.define-button-theme(
  $wb-theme,
  $border-radius: 3px
);
// 引入自定义按钮主题
@include mat.button-theme($custom-button-theme);

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