[英]how to overwrite an ion-popover element.style css
我正在尝试按下离子弹出器,但我不能。 我在 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
我在 global.css 中使用了类似下面的东西来设置弹出框的样式:
ion-popover {
ion-backdrop {
opacity: 0.5 !important;
}
.popover-wrapper {
.popover-content {
width:80vw;
max-width:600px;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.