Exploring StencilJs:
In my project using StencilJs, I aim to create a wheel time picker with 3 columns for hours in 12-hour format and minutes which can vary based on the provided array such as [0,15,30,45] or [00,30]. Additionally, there will be options for 'am' and 'pm' in the 3rd column. If a user specifies a default time, it should be displayed and emit an event upon update. This interactive wheel interface is intended to function seamlessly through scrolling or touch input.
To achieve this functionality, I have opted for utilizing the ion-datetime component; however,
An Obstacle:
Upon incorporating the @ionic/core library into my project and integrating it within my .tsx file, I noticed that all of my custom SCSS styles were overridden. This resulted in a disruption of not only the aesthetic appeal but also affected the styling of other web components within the project.
Attempted Solutions:
I experimented with adding globalStyles to my stencil.config file and even utilized distinct class names to prevent clashes between styles. Furthermore, I ensured that I am implementing the latest version of ionic/core component library. Any insights, suggestions, or working examples from the community would be greatly appreciated.