Ionic 4 custom styling of components

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

  selector: 'app-how-to-read',
  templateUrl: './',
  styleUrls: ['./'],

I’ve got some styling in 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

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

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


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


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
        //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 -


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.

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,
        //event: ev,
        //translucent: true,
      return await popover.present();

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

  .popover_class {
    --background: blueviolet;
1 Like