Ion-datetime: Style is not applied

I`m using ion-datetime like this:

<ion-datetime presentation="date" [preferWheel]="true" [(ngModel)]="saveToWeekplanDate"></ion-datetime>

It is viewed like this:


Looks like some css is missing. What could have gone wrong? In the example from the docs it is shown like this. With gradient and fade out.


Does nobody have an idea about this?

Could you share your css, please?
I’m looking for a solution to customize the font-size.
Why is it so hard to style this element at all?
No shadow parts and normal font-size property doesn’t work and nothing about that in the documentation.
Drives me mad…

This is the best i could achieve:

ion-datetime {
  position: relative !important;
  font-size: xx-large !important;
  color: black !important;
  --background: radial-gradient(
    rgba(148, 187, 233, 1) 0%,
    rgba(255, 255, 255, 1) 100%

Bildschirm­foto 2022-12-22 um 16.00.42

I don`t have custom CSS for the element nor the modal I`m showing it on. Could it be a problem to show it on the modal?

I tried it inside AND outside an ion-modal like you said. Absolutely no difference. Looks exactly the same. I’m sorry. :frowning:

Ok, does somebody else have an idea what could be wrong in my and @scjminova config?

I do not want to install an external npm plugin, if Ionic has an own element for this.

Why could the element in our app look that different from the official demo: