It it possible to format things inside an ion-select popover?

I’ve customised an ion-select but one thing that’s bothering me is the inability to customise the popover.

The following works does not work, which is immediately confusing.

ion-popover {
  --width: 100%;
}

I’m unable to style the popover in any way. NB I’m testing these in storybook. So, I’m not 100% certain that global styles find their way into the individual components I’m creating.

I’ve had a look at the DOM, and I can see that there is lot going on in there. A few things I’ve tried are:

  // Turn ALL text dark gray!
  ion-popover::part(content) {
    color: var(--dark-gray);
  }

  ion-popover::part(content) * {
    all: inherit;
  }

And also this, on the assumption that I could apply the styles to the actual text I care about in the nested ion-radio elements, without caring about the complicated DOM nesting structure.

  ion-radio::part(label),
  ion-radio::part(container) {
    --color: var(--dark-gray); /* Styles the label part of radio buttons */
    color: var(--dark-gray);
  }

What I was really hoping to do was apply dark-gray to all except the currently selected (gray!). But none of the above worked.

1 post - 1 participant

Read full topic