[ Ionic 6 ] Styling ion-datetime shadow root

Ionic Framework Ionic Angular
1

Hi Everyone,

How do we style internal part of the ion-datetime if there is no part define in it? I have tried styling in global.css with no luck. Here’s what I’m trying to achieve.

Screenshot from 2022-03-18 15-50-26

When we want to cycle over the year or months, I want to disable user selection and also set cursor to pointer. I don’t want user to be able to select the text like in the image above. I have tried styling the component as below but its not working.

ion-picker-column-internal {
    .picker-item {
        cursor: pointer;
        user-select: none;
    }
}

Below is the generated source for this component.
Screenshot from 2022-03-18 15-51-09

As we can see in the image above, picker-item is inside shadow dom for the ion-datetime component. We can change the style for it if there is a part attribute defined. However for this component, it is not available.

Anyone have any idea?

Ionic Version : 6.0.0

Thanks