仅删除 mat-select 组件的 Scroll Webkit css 类

Question

我在 global.scss 中覆盖了 webkit 滚动条类。但是对于 mat-select 它总是在滚动时停留在屏幕上，尽管设置了 overflow: auto 。那是因为覆盖了滚动条类.

现在自定义滚动条出现在mat-select的右侧，看起来很丑。我想隐藏它并继续滚动。所有其他答案都与非angular.

相关

我不知道如何正确使用这里的 ng-deep。

这是我的_globals.scss

body {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 10px;
  }

}

我在我的自定义 select 组件中尝试了几个选项，比如很多组合。

body {
  ::-webkit-scrollbar {
    display: none !important;
  }
}

只有当我使用

时，我如何才能在组件 scss 本身中实现这一点？

::ng-deep {
  ::-webkit-scrollbar {
    display: none !important;
  }
}

然后它起作用了，但很明显这到处都是血！一旦我访问我的 select 组件，每个人的滚动条都不见了。

Angularv11

Answer 1

好的，我最终实现了这个是使用 'panel-class' of mat-select。

在我的组件模板中，我将其作为“.panelClass”提供给 mat-select。

在 SCSS 中

::ng-deep {
  .panelClass {
    &::-webkit-scrollbar {
      display: none !important;
    }
  }
}

完成！隐藏的滚动条和滚动适用于 mat-select!

Removing Scroll Webkit css classes for mat-select component only