angular-material - Material 列表在移动设备中不滚动

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;
}