Angular Material 12菜单字体大小无法修改，求有效解决方法

以下是几个可行的排查和解决思路：

• 提升选择器优先级，匹配Angular Material默认层级
  Angular Material的mat-menu-item样式挂载在.mat-menu-content下，自定义选择器可能因优先级不足被覆盖。尝试调整为更精准的层级选择器：

  .my-list .mat-menu-content .list-item {
    font-size: 8px;
    padding: 2px 8px;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: center;
  
    .mat-icon {
      margin-right: 4px;
    }
  }
  

• 正确结合:host与::ng-deep
  单独使用::ng-deep易导致样式范围失控，结合:host可限定样式仅作用于当前组件内的菜单：

  :host ::ng-deep .my-list .list-item {
    font-size: 8px;
    /* 其他样式 */
  }
  

• 用开发者工具定位样式覆盖源
  右键菜单项打开浏览器开发者工具，在Elements面板的Styles标签中，查看当前生效的font-size样式对应的选择器，针对性调整自定义选择器的优先级（比如增加类层级、必要时保留!important）。

• 全局样式文件中添加限定样式
  若上述方法无效，可将样式写入项目根目录的styles.scss（或styles.css），同时保留.my-list前缀避免全局污染：

  .my-list .list-item {
    font-size: 8px !important;
    /* 其他样式 */
  }
  

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