Popover background color issue

Hi guys!

I’m trying to set the background of a popover without success. I am following the documentation and use ionic 5 with angular. In particular I have this style:


.my-custom-class {
        --background: var(--ion-color-light)

I’m opening the popover like this:

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    return await popover.present();

I’m unsure, but it may be overwritten. Try to add !important:

.my-custom-class {
    --background: var(--ion-color-light) !important;

Thanks for the response! Trying with !important but still not working, it seems like this property is not be considered.

If you inspect the Popover, is the Class applied? What happens to the Style?

Yes, the class is applied and --background property is correctly setted but it don’t have effect on the popover

How is your Popover build? Post it’s html if you can

Here’s the popover in DOM.

<ion-popover class="sc-ion-popover-ios-h sc-ion-popover-ios-s my-custom-class ios popover-translucent hydrated" id="ion-overlay-19" aria-modal="true" no-router="" tabindex="-1" style="z-index: 20019;"><ion-backdrop class="sc-ion-popover-ios ios hydrated" tabindex="-1" style=""></ion-backdrop><div tabindex="0" class="sc-ion-popover-ios"></div><div class="popover-wrapper ion-overlay-wrapper sc-ion-popover-ios"><div class="popover-arrow sc-ion-popover-ios" style="top: 192.047px; left: 26.1641px;"></div><div class="popover-content sc-ion-popover-ios" style="top: 201.047px; left: calc(5px + var(--ion-safe-area-left, 0px)); transform-origin: left top;"><app-info-partner-personificato _nghost-lrr-c158="" class="popover-viewport sc-ion-popover-ios"><ion-list _ngcontent-lrr-c158="" class="ios list-ios hydrated"><ion-list-header _ngcontent-lrr-c158="" class="ios hydrated"><ion-label _ngcontent-lrr-c158="" color="primary" class="font-weight-bold sc-ion-label-ios-h sc-ion-label-ios-s ion-color ion-color-primary ios hydrated" style="font-size: small;" ng-reflect-color="primary">Partner personificato</ion-label></ion-list-header><ion-item _ngcontent-lrr-c158="" lines="none" ng-reflect-lines="none" class="item ios item-lines-none in-list ion-focusable hydrated item-label"><ion-label _ngcontent-lrr-c158="" class="ion-text-wrap sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" style="font-size: small;">AESSE INFORMATICA DI ANGELO SORIANO</ion-label></ion-item></ion-list></app-info-partner-personificato></div></div><div tabindex="0" class="sc-ion-popover-ios"></div></ion-popover>

I build it with this component calling the presentPopover function:

  <ion-list-header><ion-label color="primary" style="font-size: small;" class="font-weight-bold">{{'interfaces.partnerPersonificato.titolo' | translate}}</ion-label></ion-list-header>
  <ion-item lines="none"><ion-label class="ion-text-wrap" style="font-size: small;">{{this.authenticationService.partnerPersonificato.Partner.Anagrafica.RagioneSociale}}</ion-label></ion-item>

I’m not sure, does the <ion-list> maybe have it own background color?


You’re right! Triyng with a simple ion-label it works! I’ve to override ion-list css in popover. Thank you so much EinfachHans

Yes, this is the issue, ion-list is overriding custom styles for popover, you should edit style of ion-list or what ever elements inside the popover custom element.

For me I had to override the style of ion-content element --background: #fff

I hope this too help: Can't see popover arrow in dark mode(Chrome and Safari) · Issue #21021 · ionic-team/ionic-framework · GitHub