附加到组件时如何调整 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

上浆的角度CDK方式cdk-overlay-container是提供您的自定义CSS类OverlayConfig，有backdropClass和panelClass性能。

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