Mismatch between editor and rendered result.
Setup
• create a component BigText, with the goal to override font style of its contents (e.g render an H1 with a smaller text size)
• set the font style on the slot target to e.g. 36 px
• instantiate this component, and put an H1 in it
I would now expect the H1 to have the size 36 px, and according to the UI, it should have that (see first image), but in reality it still has the H1 size (see 2nd image). Looks like the default h1 styles are still being applied… resulting in size 72 px
I could create a mixin to control the reduced size of the H1 instead of having a component do it, but I want to be able to adjust the font sizes across breakpoints, and it does not look like mixins are able to do this…
Issue can be seen in project https://studio.plasmic.app/projects/mrgn3VC2r6s7VB3wKPe7xp , page “DS Fonts”
See the “H1 as H2”, “H1 as H3” etc…
Based on the documentation for the slot, “you can provide default text styles to control …” the question is whether these default styles should override the default font styles… IMO they should , and the UI suggests that as well, but they don’t…
Ok, I found a workaround…
If I create a H1, then convert it to a container, and put the “BigText” module inside it, then the contained text is formatted corectly…
I can change most of the elements to spans, but the slot target itself is a div, so now I have an
tag with a in it, which is not great…
Any way to change a slot target to a span?
Or any other solutions here?
Got to an acceptable solution for now by simplifying the bigtext component… So we now have
H1
– BigText (no slot, but content set via param)
This is a bit messy, but good enough. Would have been better to allow a mixin into the H1 with a mixin that could automatically respond to breakpoints
