Ionic 4 custom styling of components

Ionic Framework
1

I’ve nearly converted my app to Ionic 4 but I can’t understand how to customize components (been through every link and tutorial on the forum, but something hasn’t got through to me).

I have many popovers in the app. The first is called “how to read” with the following selectors

@Component({
  selector: 'app-how-to-read',
  templateUrl: './how-to-read.page.html',
  styleUrls: ['./how-to-read.page.scss'],
})

I’ve got some styling in app-how-to-read.page.scss which work fine on my classes…

    td {
            padding: 10px;
            text-align: left;
            font-size: 15px;
       } 
   .myButtons {
   font-size: 20px;
   font-weight: 200;
   width: 100%;
   }

But now I want to change the size and background of the popover. The css CustomProperties of the popover page https://ionicframework.com/docs/api/popover#properties

just says, for the background for example, use --background.

But where do I put it? Do I put something like

app-how-to-read{
    --background:green;
  }

in the scss file, or in variables.scss? I’ve tried both with many versions of the selector to no avail.

Thanks

2

Reading the docs again it appears the values are passed by the popover controller. So I get (for a different popover than in the first message)…

 async presentGoHome(ev: any) {
      const popover = await this.popoverController.create({
        component: GoHomePage,
        //componentProps:{popoverController:this.popoverController},  // to try
        componentProps:{popoverController:this.popoverController,imageURL:this.imgSource},
        //cssClass:"{--min-width:200px;}",
        cssClass:"{--background:#ff2233;}",
        //animated:true
        //event: ev,
        //translucent: true

      });

In this code the only thing that seems to pass to the popover (when not commented) is the event:ev - commented out it places the popever in the middle of the view as promised in the docs. Nothing else changes the appearance of the popover - translucent, animation etc do nothing. And this -

cssClass:"{--background:#ff2233;}",

should change the colour of the background of the popover. But I can’t get it to work. I don’t actually want to change the colour, I want to pass min-height etc to change the shape and position of hte popover, but it doesn’t work either :frowning:

On reflection this makes no sense, as the same css properties can be applied to other components, e.g. cards, that just exist without being popped.

3

Solved it from a bug report that showed me the syntax sort of…

cssClass points to an identifier in variables.scss thus

 async presentPopover(ev: any) {
      const popover = await this.popoverController.create({
        component: PopPage,
        componentProps:{popoverController:this.popoverController},
        //event: ev,
        //translucent: true,
        animated:true,
        cssClass:"popover_class",
      });
      return await popover.present();
    }

then in variables.scss (or global.scss?)

  .popover_class {
    --background: blueviolet;
    --min-width:300px;
    --min-height:90%;
}
1 Like