如何移除Angular Material对话框白色背景并让其适配父组件居中显示

解决步骤 #

1. 调整对话框调用配置

修改PostListComponent中的createPost方法，移除强制顶部定位，修改宽高限制，开启MatDialog默认的自动居中能力：

export class PostListComponent{
  ngOnInit(): void {}

  /** 创建发帖模态框 */
  createPost(): void {
    // 删掉固定top定位参数，MatDialog默认会自动水平垂直居中
    this.matDialog.open(CreatePostComponent, {
      // 大屏下最大宽度可根据父组件宽度调整，示例设为600px，可自行修改
      maxWidth: '600px',
      // 小屏场景占90%视口宽度，避免溢出
      width: '90vw',
      panelClass: 'post-dialog-container',
      // 完全不需要背景遮罩就加这一行，需要的话可以删掉
      hasBackdrop: false
    });
  }
}

2. 新增全局样式重置对话框默认样式

在项目全局样式文件（通常是styles.scss）中添加以下代码，移除模态框默认的背景、阴影和多余内边距：

.post-dialog-container {
  /* 去掉默认白色背景 */
  background: transparent !important;
  /* 去掉默认内边距 */
  padding: 0 !important;
  /* 去掉默认阴影 */
  box-shadow: none !important;
  /* 如果保留遮罩需要调整透明度，放开下面的注释修改即可 */
  // & + .cdk-overlay-backdrop {
  //   background: rgba(0,0,0,0.2) !important;
  // }
}

3. 清理模态框模板多余结构

原HTML中左右两侧的空白栅格列是多余空白的主要来源，直接删除冗余结构，仅保留表单区域即可，修改CreatePostComponent的HTML代码：

<div class="post-container">
  <!-- 给表单区域加背景和圆角，按需调整样式 -->
  <div class="create-post" style="background: #fff; border-radius: 8px;">
    <!-- 去掉mat-dialog-content默认的内边距 -->
    <mat-dialog-content style="padding: 0; margin: 0;">
      <div class="container-fluid-post">
        <div class="d-flex bd-highlight">
          <div class="p-2 flex-grow-1 bd-highlight">
            <div class="d-flex px-3 pointer">
              <mat-icon (click)="closeDialog()" class="font-weight-bold">clear</mat-icon>
            </div>
          </div>
          <div class="p-2 bd-highlight">
            <button type="submit" class="btn btn-primary btn-sm font-weight-bold"
              [disabled]="submitButton === false">发布</button>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div class="d-flex p-3">
          <div class="px-0">
            <div class="img-container">
              <img src="{{ (currentUser$ | async).profilePicture | imageUrlPipe}}"
                onerror="this.src='assets/no-avatar.png'" alt="用户头像" height="40px" 
                width="40px"
                class="rounded-circle">
            </div>
          </div>
          <form [formGroup]="postForm" class="form-container w-100 ml-3" 
           (ngSubmit)="createPost()">
            <div class="post-container px-0 w-100">
              <mat-form-field appearance="none" class="form-field w-100">
                <textarea matInput name="text" formControlName="text" id="text" 
                 class="post-input"
                  cdkTextareaAutosize #autosize="cdkTextareaAutosize" 
                  cdkAutosizeMinRows="1"
                  cdkAutosizeMaxRows="1000" placeholder="今天想分享点什么？">
                </textarea>
              </mat-form-field>
              <div class="d-flex bd-highlight">
                <div class="p-2 flex-grow-1 bd-highlight">
                  <div class="d-flex">
                    <div class="pointer text-danger">
                      <input type="file" accept="image/*" #file hidden 
                          (change)="addImage($event)" />
                      <mat-icon id="file-input" (click)="file.click()" class="icon-container">add_a_photo</mat-icon>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </mat-dialog-content>
  </div>
</div>

4. 适配父组件宽度调整

如果需要严格适配父组件宽度，只需要把第一步调用时的maxWidth参数改成父组件的实际最大宽度即可，小屏会自动适配90%视口宽度，不会出现左右溢出问题。

内容的提问来源于stack exchange，提问作者Andongwisye Mwamengo