如何覆盖一个 ion-popover element.style css

Question

我正在尝试按下 ion-popover，但我做不到。我在 CSS 类中尝试了很多东西，但没有任何效果。我发现在 de ion-popover 组件中有一个 div 将弹出框的顶部位置设置为 169px，我认为这就是问题所在。

<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 中弹出框的类

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

this is how i want it to look 我正在使用 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;
            }
        }
    }