Hello,
I’m trying to build Stencil components and use Ionic components inside of them. I create a regular Stencil component library and install the necessary dependencies to use Ionic.
To style the Ionic components I use the Ionic variable theming, in my global.css. This works when rendering the components in the Stencil runtime. But as soon as I pack the component and install it in a React project, the theming does not work. If I used <ion-button color="danger>
, the button would have a transparent background instead of a red one. But the components at least maintain their core Ionic styles that get imported when you install Ionic.
However, when I try using React-Output-Targets with these Stencil + Ionic components, the Ionic components completely lose their core styling, let alone the variable theming. A <ion-button>
would look like a regular, unstyled, vanilla HTML <input>
If anyone has any insight on if using Stencil + Ionic is even manageable, please let me know.
Thanks!