Ionic 4 custom themes for components

Ionic Framework
1

I don’t understand how to apply custom themes. For example to make all popovers a certain width.

I’ve read the theming section of the docs a stack of times but I don’t get it. I can change and define my own colours successfully (but don’t ask me how to use, for example, --ion-color-favorite-shade - the docs done help me with that )

What I need to do now is play with width and height of popovers e.g. set the --min-width of popovers to 50%. I would like to do this for all popovers (and maybe eventually work out how to do it for just one popover).

My guess is I need to add under root: in variables.css something like…

.ion-popover-class {
–min-width:90%;
–min-height:90%;
}

Can anyone help me with this? Thanks

2

So I worked it out.

When calling popover you put cssClass: as a parameter in the create call…

 async presentGoHome(ev: any) {
    var closeDataString = "no";
    const popover = await this.popoverController.create({
      component: GoHomePage,
      componentProps: { popoverController: this.popoverController, imageURL: this.imgSource },
      cssClass: "home-popover-class",
      event: ev,
    });
etc.

and in variables.scss you put

.home-popover-class{
  --min-width:90%;
  --min-height:20%;
  --max-height:50%;
}

Don’t know if it needs to be in root in variables.scss. It’s working for me outside root.