как перезаписать элемент ion-popover. стиль css

Question

Я пытаюсь сделать sh по ионному всплывающему устройству, но не могу. Я много чего пробовал в классе css, но ничего не работает. и я обнаружил, что внутри компонента de ion-popover есть div, который устанавливает верхнюю позицию всплывающего окна на 169 пикселей, и я думаю, что в этом проблема.

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

это html из ion-popover

<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>

это класс popover в global.s css

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

вот как я хочу, чтобы он выглядел i `m, используя ioni c 5 и angular 9.1

Answer 1

Я использовал что-то вроде ниже для стилизации всплывающего окна в моем глобале. css:

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