Ion-datetime: Style is not applied

Ionic Framework
1

I`m using ion-datetime like this:

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

It is viewed like this:

image

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.

image

2

Does nobody have an idea about this?

3

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(
    circle,
    rgba(148, 187, 233, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

Bildschirm­foto 2022-12-22 um 16.00.42

4

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?

5

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

6

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: