ionic 在模态中添加框阴影不起作用

Question

我正在尝试为模型弹出窗口添加阴影以赋予其一定的尺寸。但这并不适用。这是代码

 const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent,
      cssClass: 'insight-explain-model',
      componentProps: {
        "insight": entry.explanation
      }
    })

    modal.present();

CSS

  .insight-explain-model {
    --max-height: 350px;
    --max-width: 80%;
    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
  }

Answer 1

--box-shadow属性不是直接在模态等离子组件中使用的标准CSS变量。 Ionic 组件依赖于 Shadow DOM 或作用域样式，这可能并不总是允许全局样式按预期应用。

1。瞄准模态框的内部元素

Ionic 模态使用 .modal-wrapper 类来设置模态内容的样式。您需要在自定义模态类中定位类 。

像这样更新你的CSS：

.insight-explain-model .modal-wrapper {
  max-height: 350px;
  max-width: 80%;
  box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
  border-radius: 8px; /* Optional: To make it look nicer */
 }

2。验证 Shadow DOM 隔离

如果组件使用Shadow DOM，某些样式可能无法直接应用。您可以通过使用 ::part 伪元素或 ::slotted 选择器（如果支持）来绕过此问题。