I’ve just started to use Ionic 4 and am in the process of migrating our ionic1 project. Since this comes with a major design overhaul im currently styling elements starting with our login form containing elements.
At first i was like “this should be fast, just adjust the ion components to our design template”… not so fast.
I realized, that all elements inside the #shadow-root are not accessible with my pages scss.
So my question: How am i supposed to style built-in components when the CSS variables don’t reflect my desired changes?
This is my login form which should be centered (achived with a “text-center” attribute)
clearly the font is not centered on the line but when entering text it gets worse:
The label text is off center even more and i don’t see a way to fix that without using ugly stuff like injecting the CSS via JS into the shadowDOM. Without shadowDOM this would be a 5 min fix which turned into a 5h hour de force without a clean solution on the horizon.
Do i have to style my own input element and abandon the ionic one?