材料列表在移动设备中不滚动

Question

我正在使用mat-list，但无法在移动设备上滚动它。

它是一个 mat-nav-list，里面有一些 mat-list-item，我的列表的结构类似于：

<mat-nav-list>
   <a mat-list-item matTooltip="dashboard" routerLink="/dashboard">
     <mat-icon matListIcon>dashboard</mat-icon>
   </a>
   ...
</mat-nav-list>

我可以用鼠标在桌面上正常滚动，但是当我在移动浏览器中时，我会看到每个 mat-list-item 都带有以下内容：

element.style {
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

浏览器本身应用CSS吗？如果我尝试用内联样式覆盖没有任何变化，我该如何解决它？

Answer 1

就我而言，CSS 样式来自mat-list-item. 所以我唯一能做的就是直接重写它。

[mat-list-item]{
  touch-action: auto !important;
}