Basically I am trying to build a wheel time picker which have 3 columns for hour in 12h format and minutes which depends on the what type of array is provided for example: [0,15,30,45] or [00,30]
with am and pm as a 3rd column to choose from , and if user provides anytime it should use that as default value and emit an event on update, and this wheel will do that all on scroll or touch
so to do that, I am using ion-datetime component but
When I use ion-datetime component in my project and after importing @ionic/core in my .tsx file it overwrites all my custom scss
importing @ionic/core messes up the whole style and style of other web component in my project as well.
I tried adding globalStyles to my stencil.config file, even used different class name so thy don't clash with each other and I am using the latest version of ionic/core.
If anyone have any idea or suggestion or working example, please do let me know.
I found the answer
Why it's happening :
because Host of ion-datetime is overwriting the Host of my other web components
Solution
You can define Host again with !important to make your style priority in your own web component
To know how you can work with Host you can refer to their docs
https://stenciljs.com/docs/styling
or better solution instead of using NPM package @ionic/core in stencil you can use the CDN link
<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic.js"></script>
because you may have multiple CSS style in your web component and re defining them all is not possible sometimes