Responsive styles with Emotion

[Grsmto]

💬 Questions and Help

Hi!

For context, I'm coming from ThemeUI which is based at the core on Emotion. On ThemeUI I can do like this:

<h2
   css={{
     fontSize: ["2.1rem", "2.4rem"],
  })}
>

I'm trying to use responsive styles with the Emotion's css prop but I can't make it work.
I tried the breakpoints function from @xstyled/system, also tried the following:

<h2
   css={{
     fontSize: { sm: "2.1rem", md: "2.4rem" },
  })}
>

but doesn't seem to work.
Is there a way of doing this or it's simply a missing feature?

Thanks!

[Grsmto]

Actually I managed to do this with the breakpoints utility. Not sure why I couldn't yesterday but it works this way:

<h2
  css={breakpoints({
    xs: { display: "block" },
    sm: { display: "none" },
  })}
>

[Grsmto]

So I'm giving a bit of feedback on this after trying the different options I had and I think there is no neat solution to do responsive styles using the css prop (but actually it's probably the same with SC).
I think being able to do whichever solution I proposed in my first comment (either array or object breakpoints) would make this lib just the perfect choice.
Having to refactor your entire css declaration to be wrapped in a breakpoint() is not really handy and the up/down functions are cool but the styles get quite unreadable once you have them in.

Also Emotion css function does not compute functions inside the declaration, so I don't think the utilities provided by Xstyled are usable with it (I might be wrong?!).

[gregberge]

@Grsmto for emotion you can use them inside the styled components at top level, at other places you have to pass the props manually.