如何在 ionic 5 中使用 shadow dom 设置模态样式答案

【问题标题】：How to style modals in ionic 5 with shadow dom如何在 ionic 5 中使用 shadow dom 设置模态样式
【发布时间】：2022-08-18 06:17:31
【问题描述】：

我最近从 Ionic 4 升级到 5，但我的模态样式都不起作用。我已经阅读了文档，并且我正在做的事情似乎应该可行。在global.scss 我有以下内容：

.modal-fullscreen .modal-wrapper {
    border-radius: 0;
    position: absolute;
    top: 20px;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

当我创建模态时，我使用modal-fullscreen 作为cssClass 参数。

  inviteClient( client : IndexClient ) : void {
    this.modalCtrl.create({
      component: InviteClientComponent,
      componentProps: {
        \'consult_client\': client,
        \'location_id\': this.location
      },
      backdropDismiss: false,
      cssClass: \"modal-fullscreen\"
    }).then( modal => modal.present());
  }

文档明确指出这应该在这里工作：

我们建议在 create 方法中将自定义类传递给 cssClass 并使用它为宿主和内部元素添加自定义样式。此属性还可以接受多个由空格分隔的类。查看用法部分以获取有关如何使用传递类的示例 css类。
/* DOES NOT WORK - not specific enough */ .modal-wrapper {  
background: #222; }

/* Works - pass \"my-custom-class\" in cssClass to increase specificity
*/ .my-custom-class .modal-wrapper {   background: #222; }
知道我能做什么吗？

我遇到的问题完全一样，我猜你从来没有找到解决方案
我不记得确切但不得不使用这样的东西：.modal-fullscreen::part(content), ion-modal.modal-fullscreen .modal-wrapper { border-radius: 0; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

标签： css ionic-framework

【解决方案1】：

已经有一段时间了，但它可能会对某人有所帮助。

您可以使用CSS Shadow Parts，它在它的组件中使用 ionic 来根据需要自定义它。

看到那个模态包装器分类ion-modal shadow-root 中的 div 有一个名为“content”的部分，这是您在这种情况下应该使用的部分。 ion-modal example

您的 CSS 应如下所示：

ion-modal.modal-fullscreen::part(content) {
    border-radius: 0;
    position: absolute;
    top: 20px;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

您也可以查看ion-modal documentation 了解更多使用离子模态的方法。使用工作表模态，或更具体的断点ModalOptions 属性可能是实现您想要的更好的方法。

【讨论】：