如何覆盖ion popover元素.style css

Question

我想按下离子弹出键，但我做不到。我在css类中尝试了很多东西，但都不起作用。我发现de ion popover组件内部有一个div，它将popover的顶部位置设置为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;">

这是离子弹出的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 中popover的类

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

这就是我想要的样子我正在使用离子5和角度9.1

Answer 1

我在global.css:中使用了下面这样的东西来设置popover的样式

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