bug: Can't set the active wheel item text color for ion-datetime
Prerequisites
- [x] I have read the Contributing Guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
I am trying to set the text color of the ion-datetime current time item,
Looking at the documentation, I should be able to use the ::part(wheel-item active) to do this. In the linked example, I have set this to red, whoever, it is not being applied.
I have the following in global.scss
ion-datetime::part(wheel-item active) {
color: red !important;
}
Expected Behavior
I would like to be able set the highlight color of the selected time item
Steps to Reproduce
- Get the sample at https://github.com/pjc2007/date-time-issue
- Click SHOW DATE TIME PICKER
- Click on the time
- Click in the time picker
The red as set in global.sccs is not being applied.
Code Reproduction URL
https://github.com/pjc2007/date-time-issue
Ionic Info
$ ionic info [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
Require stack:
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
Require stack:
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
- C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
Ionic:
Ionic CLI : 7.2.1 (C:\Users\Peter\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/angular 8.7.5 @angular-devkit/build-angular : 20.3.4 @angular-devkit/schematics : 20.3.4 @angular/cli : 20.3.4 @ionic/angular-toolkit : 12.3.0
Capacitor:
Capacitor CLI : 7.4.3 @capacitor/android : not installed @capacitor/core : 7.4.3 @capacitor/ios : not installed
Utility:
cordova-res : not installed globally native-run : 2.0.1
System:
NodeJS : v22.17.1 (C:\Program Files\nodejs\node.exe) npm : 10.9.2 OS : Windows 10
Additional Information
Not sure if this is affected due to being inside a modal?