Modal custom style not working

I am trying to style Modal so it looks like actionSheet with custom content. I cant seem to target the right element or attribute to get this right. When I use a custom class, I can see it in the DOM but its CSS properties are not showing.

This is how I want the modal to look like - I can style ion-modal if I inspect DOM and style in Styles browser tab


<ion-button @click="openModal()">
	<ion-icon :icon="addCircle"></ion-icon>


import {
} from "@ionic/vue";

import Modal from "./Modal";

import { 
} from "ionicons/icons";

  methods: {
    async openModal() {
      const modalInstance = modalController;
      const modal = await modalInstance
          component: Modal,
          cssClass: "custom-modal-class",
          componentProps: {
            context: this,

      return modal.present();


// I tried both ion-modal and custom-modal-class
ion-modal { 
  --height: 320px; 
  margin-top: 500px; 
  border-radius: 50px 50px 0 0;

I have been running intro this same issue. I think you have to create a css file and include it in your main.ts file.

Thanks that worked. Though I feel like one should be able to do this in the style section of the Modal or Page.

1 Like

I’m glad it worked. It’s not possible because the style is scoped, it means that it’s visible only in the page it’s being executed; as modal is an external component, the styles won’t be applied inside your Modal Page.

Alternate, but deprecated working way also, right in your component scss:

::ng-deep ion-modal { 
  --height: 320px; 
  margin-top: 500px; 
  border-radius: 50px 50px 0 0;

One more way, if you would like to make your action sheets more complicated, with drag events, feel free to use

Not sure I understand… I am able to style everything else inside the modal though. The issue is only when targeting ion-modal.

Like I said, ion-modal is the “master” component let’s say, hence cannot be stylized using scoped styles. But that’s what I think from what I have read and noticed. I might be wrong thought.

1 Like