Angular 16中CSS类求值顺序问题：自定义样式被Material覆盖

试试这几个方案提升自定义样式优先级，不用!important：

• 提升CSS特异性
  利用CSS特异性规则，给自定义类搭配更具体的选择器组合：

  • 重复自定义类名：比如.add-button.add-button，这种写法的特异性高于单个Material类
  • 结合父容器/组件宿主选择器：比如.page-header .add-button（全局样式）或:host .add-button（组件内样式）
    示例代码：

  // 重复类名提升优先级
  .add-button.add-button {
    padding: 8px;
    color: #ffffff;
  }
  
  // 组件内结合宿主选择器
  :host .add-button {
    margin-right: 12px;
  }
  

• 嵌套全局样式增强优先级
  在全局styles.scss里，把自定义样式嵌套在Material组件的类选择器内部，借助SCSS嵌套特性让选择器更具体：

  // 嵌套在Material按钮类下，确保优先级更高
  .mat-mdc-icon-button {
    &.add-button {
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }
  }
  

• 用CSS变量直接覆盖默认值
  Angular Material的MDC组件大量使用CSS自定义属性，直接修改这些变量比覆盖类样式更稳妥，还能避免优先级冲突：

  .add-button {
    --mdc-icon-button-size: 48px; // 修改按钮尺寸
    --mdc-icon-button-icon-color: #1976d2; // 修改图标颜色
  }
  

• 谨慎调整样式封装（按需使用）
  如果组件默认的ViewEncapsulation.Emulated限制了样式生效，可以在组件元数据里设置encapsulation: ViewEncapsulation.None，但注意这样组件样式会全局生效，要做好样式隔离，避免污染其他组件。

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