Angular .cdk-virtual-scroll-content-wrapper 的 CSS 未应用

Question

我想<cdk-virtual-scroll-viewport>使用 CSS 类自定义 a .cdk-virtual-scroll-content-wrapper，以便滚动容器始终显示滚动条。但我针对此特定元素的 CSS 代码未应用（同一组件中的所有其他样式都有效）。

.cdk-virtual-scroll-content-wrapper {
  overflow-y: scroll;
}

该行为并非特定于此 CSS 属性 - 例如，如果我设置边框，也不会产生任何效果。

在开发者工具中我可以看到有效的 CSS，但缺少overflow-y：

.cdk-virtual-scroll-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    contain: content;
}

但是，如果我直接在浏览器的开发人员工具中更改相应 HTML 元素的 CSS，则会显示滚动条。

将 CSS 设置为cdk-virtual-scroll-viewport或cdk-virtual-scroll-viewport > div也不起作用：

cdk-virtual-scroll-viewport {
  overflow-y: scroll;
}

我将 Angular 10.2.2 与 Sass 一起使用。

如何应用CSS .cdk-virtual-scroll-content-wrapper？

Answer 1

尝试使用::ng-deep

::ng-deep .cdk-virtual-scroll-content-wrapper {
  overflow-y: scroll;
}

更新

如下所述，这可能会导致副作用，要隔离，请添加如下的 css 类：

.you-class ::ng-deep .cdk-virtual-scroll-content-wrapper {
  overflow-y: scroll;
}