如何为VMware Clarity UI框架实现全屏模态框？

嘿，我之前刚好碰到过一模一样的需求——Clarity默认提供的模态框尺寸确实没有全屏选项，但其实不用改框架源码，靠自定义CSS就能轻松搞定，给你分享两个靠谱的方案：

方案一：全局自定义CSS类（推荐复用场景） #

先写一个全局的全屏模态框样式类，之后所有需要全屏的模态框直接加这个类就行，非常适合多个地方复用的场景：

/* 在全局样式文件（比如styles.css）中添加 */
.fullscreen-clr-modal .modal-dialog {
  width: 100vw;
  height: 100vh;
  margin: 0;
  max-width: none; /* 覆盖Clarity默认的max-width限制 */
}

.fullscreen-clr-modal .modal-content {
  height: 100%;
  border-radius: 0; /* 可选：去掉默认圆角，让全屏效果更贴合 */
}

然后在你的模态框容器上添加这个类：

<div class="modal fullscreen-clr-modal" [clrModalOpen]="isFullscreenModalOpen">
  <div class="modal-content">
    <!-- 你的模态框内容 -->
    <h3 class="modal-title">全屏模态框</h3>
    <div class="modal-body">
      这里是全屏的内容展示区域
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" (click)="isFullscreenModalOpen = false">关闭</button>
    </div>
  </div>
</div>

如果是在Angular组件内的样式文件中编写，需要用:host ::ng-deep穿透组件样式隔离：

/* 组件的.scss文件中 */
:host ::ng-deep .fullscreen-clr-modal .modal-dialog {
  width: 100vw;
  height: 100vh;
  margin: 0;
  max-width: none;
}

:host ::ng-deep .fullscreen-clr-modal .modal-content {
  height: 100%;
  border-radius: 0;
}

方案二：动态绑定样式（适合单个模态框特殊需求） #

如果只是某个特定模态框需要全屏，不想新增全局类，可以直接在组件里用ngStyle绑定样式：

<clr-modal [clrModalOpen]="isSingleFullscreenOpen"
           [ngStyle]="{
             width: '100vw',
             height: '100vh',
             margin: '0',
             maxWidth: 'none'
           }">
  <div class="modal-content" [ngStyle]="{height: '100%', borderRadius: '0'}">
    <!-- 模态框内容 -->
    <h3 class="modal-title">单个全屏模态框</h3>
    <div class="modal-body">
      仅这个模态框会显示为全屏样式
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" (click)="isSingleFullscreenOpen = false">关闭</button>
    </div>
  </div>
</clr-modal>

小提示 #

• 如果遇到样式不生效的情况，先检查选择器的优先级，必要时可以用!important（尽量少用，优先调整选择器的特异性）
• 要是不想完全占满屏幕，想保留一点边距，可以把100vw/100vh改成98vw/98vh，再加上margin: 1vh auto调整位置

内容的提问来源于stack exchange，提问作者Albert Hoekstra