我最近从Ionic 4升级到了Ionic 5，但是我的模态样式都不起作用。我看了文档，我所做的似乎应该起作用。在global.scss中，我有以下代码：
.modal-fullscreen .modal-wrapper {
border-radius: 0;
position: absolute;
top: 20px;
left: 0;
display: block;
width: 100%;
height: 100%;
}在创建模态时，我使用modal-fullscreen作为cssClass参数。
inviteClient( client : IndexClient ) : void {
this.modalCtrl.create({
component: InviteClientComponent,
componentProps: {
'consult_client': client,
'location_id': this.location
},
backdropDismiss: false,
cssClass: "modal-fullscreen"
}).then( modal => modal.present());
}文档明确指出，这应该在这里工作：
我们建议在create方法中将自定义类传递给cssClass，并使用该类将自定义样式添加到宿主元素和内部元素。此属性还可以接受由空格分隔的多个类。有关如何使用cssClass传递类的示例，请查看用法部分。
/* DOES NOT WORK - not specific enough */ .modal-wrapper {
background: #222; }
/* Works - pass "my-custom-class" in cssClass to increase specificity
*/ .my-custom-class .modal-wrapper { background: #222; }你知道我能做什么吗？
1条答案
按热度按时间9o685dep1#
已经有一段时间了，但也许能帮上忙
你可以使用CSS Shadow Parts，ionic在它的组件中使用它来定制你想要的。
可以看到，ion-modal shadow-root中的modal-wrapper classed div有一个名为“content”的部分，在本例中应该使用这个部分。ion-modal example
您的CSS应如下所示：
你也可以检查ion-modal documentation来获得更多使用离子模态的方法。使用工作表模态，或者更具体的断点ModalOptions属性可能是实现你想要的更好的方法。