angular - 附加到组件时如何调整 Angular CDK 覆盖背景的大小

Question

我想在特定组件上覆盖 CDK。我使用 flexibleConnectedTo() 将叠加层的内容部分正确定位在组件上。我不知道如何让叠加背景仅覆盖组件而不是整个页面。 cdk-overlay-container 类的 CSS 为

pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;

我知道我可以覆盖 CSS，但我正在寻找的是 Angular CDK 调整 cdk-overlay-container 大小以适应组件边界的方法。

我通读了文档，但是我没有找到执行此操作的方法。我是否遗漏了文档中的某些内容？

Answer 1

Angular CDK 调整 cdk-overlay-container 大小的方法是向 OverlayConfig 提供自定义 css 类，有 backdropClass 和 < strong>panelClass 属性。

 let overlayRef = this.overlay.create({
     backdropClass: 'your-custom-overlay-class',
     panelClass: 'your-custom-panel-class'
 });