angular material 7 cdkoverlay 设置透明/自定义背景类

Question

我正在使用 cdkoverlay，它似乎有一个默认的深色背景。查看文档 Overlay Documentation ，我应该可以通过设置背景类来更改为透明背景。难道我做错了什么？

Angular 版本 - 7.2.7
CDK 版本 - 7.3.3

<button mat-icon-button (click)="isOpen = !isOpen" cdkOverlayOrigin 
        #trigger="cdkOverlayOrigin">
  <mat-icon>opacity</mat-icon>
</button>

<ng-template cdkConnectedOverlay 
        [cdkConnectedOverlayHasBackdrop]="true"
        [cdkConnectedOverlayBackdropClass]="cdk-overlay-transparent-backdrop"   
        (backdropClick)="isOpen = false" 
        [cdkConnectedOverlayOrigin]="trigger" 
        [cdkConnectedOverlayOpen]="isOpen">

    <div class="e6-menu-panel" role="dialog">
    <div class="e6-grid-container" role="listbox" tabindex="0" cdkTrapFocus>
    <div class="e6-grid-item" *ngFor="let theme of themes; index as i"
        (click)="install(theme); isOpen=false" role="option"
        [style.background-color]="theme.primary">

        <mat-icon class="e6-active-icon" *ngIf="current == theme">
          check_circle
        </mat-icon>
    </div>
    </div>
    </div>

</ng-template>

Answer 1

我以错误的方式添加透明类:

[cdkConnectedOverlayBackdropClass]="cdk-overlay-transparent-backdrop"

这是正确的方法:

cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"

来自 Documentation :

One-time string initialization

You should omit the brackets when all of the following are true:

• The target property accepts a string value.
• The string is a fixed value that you can bake into the template.
• This initial value never changes.