如何覆蓋一個 ion-popover element.style css

Question

我正在嘗試按下離子彈出器，但我不能。 我在 css class 中嘗試了很多東西，但沒有任何效果。 我發現在 de ion-popover 組件中有一個 div，它設置了彈出框的 169px 的頂部 position，我認為這就是問題所在。

<div class="popover-content sc-ion-popover-ios" style="top: 169px;left: calc(5px + var(--ion-safe-area-left, 0px));transform-origin: left top;">

這是 ion-popover 的 html

<ion-content>

  <ion-header class="ion-no-border">
    <ion-toolbar class="ion-no-border">
      <h1 class="ion-text-center" style="font-family: Poppins; font-weight: bold;">
        <ion-icon slot="icon-only" src="../../../assets/logoBitcoin.svg"></ion-icon>
        Bitcoin
      </h1>
    </ion-toolbar>
  </ion-header>

  <div style="width: 100vw; color: white;"></div>

  <div>
    <h1>{{user.name}}</h1>
    <h2> ${{user.btcBalanceUsd}}</h2>
  </div>
</ion-content>

這是 global.scss 中彈出框的 class

.criptoTransfer{
    .popover-content {
        width: 100vw;
        height: 50vh;
    }
}

這就是我希望它看起來的樣子，我正在使用 ionic 5 和 angular 9.1

Answer 1

我在 global.css 中使用了類似下面的東西來設置彈出框的樣式：

ion-popover {
        ion-backdrop {
            opacity: 0.5 !important;
        }
        .popover-wrapper {
            .popover-content {
                width:80vw;
                max-width:600px;
            }
        }
    }