Ionic 4 and how to style elements

Ionic Framework
1

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)

53
clearly the font is not centered on the line but when entering text it gets worse:
29
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?

2

@eyeswideopen It seems you were able to make the text centered. I think the label is not centered correctly because there is:

transform: translateZ(0) scale(.8);

This css reduces the size changing the scale, so you can workaround it with (in the ion-label):

width: 125%;
max-width: 125%;

That is: 100 / 0.8 = 125

Have in mind that this css should be applied only when the input has focus or has text.

This is the css of the ionic component itself that change the scale (for ios):

.item-has-focus.label-floating.sc-ion-label-ios-h, 
.item-has-focus .label-floating.sc-ion-label-ios-h, 
.item-has-placeholder.label-floating.sc-ion-label-ios-h, 
.item-has-placeholder .label-floating.sc-ion-label-ios-h, 
.item-has-value.label-floating.sc-ion-label-ios-h, 
.item-has-value .label-floating.sc-ion-label-ios-h {
    -webkit-transform: translateZ(0) scale(.8);
    transform: translateZ(0) scale(.8);
}

so you should use some similar css (something with .item-has-focus and .item-has-value).

About the shadow-dom, I think that was an unfortunate choice made by the ionic team in the sense that it makes styling ionic components much harder (although it says it’s because of encapsulation, I don’t buy that, and consider that it does more harm than good, with the need of ugly hacks or having to fork the component just to apply some trivial style, unless the shadow dom specification allows in the future something like /deep/, but I don’t know if something similar will be included and when, and until then, for me, it’s not production ready).

That said, I don’t think the Ionic Team will go back now, so I will see how things will work after the release.

3

Thank you very much! I will try this as soon i’m back on it.

But concerning the underlying issue:
Do i get it right, that with the turn towards the shadowdom Ionic abandoned all customization of their elements beyond the (limited) available css variables? I’m crying inside…

But your tip with completely forking their elements is a good one as well. Might be my only choice.

Thanks!

4

Hello,
I use the inspection in google to find and modify my elements that I wish, it remains for me to copy from the inspector and paste it in the scss of the page