Second array value skipped with responsive styling + custom breakpoints

🐛 Bug report

When using custom breakpoints, adding responsive styling with array syntax skips the second value.

💥 Steps to reproduce

1. Add custom breakpoints to theme.ts.
2. Go to any component and use array syntax for responsive styling. Eg. bg={["tomato", "green", "blue", "yellow"]}.
3. You will notice the second value of the array "green" is never applied.

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/kind-thunder-khlbw?file=/src/index.js

🧐 Expected behavior

All array values should be incrementally applied.

bg={["tomato", "green", "blue", "yellow"]}

tomato - base green - sm blue - md yellow -lg

🌍 System information

Software	Version(s)
Chakra UI	1.6.3
Browser	Chrome
Operating System	Ubuntu 16.04

📝 Additional information

Link to discussions #4178

[spidertwin2]

Thanks @jatin33 for taking the time to find a workaround this! It had me bumfuzzled since forever!

🦕

[jatin33]

@spidertwin2 Have you tried using “em” or “rem” instead of “px” as css unit to create custom breakpoints? I tried and it seems to be working. working sandbox url: https://codesandbox.io/s/exciting-jepsen-gvlou?file=/src/theme.ts @with-heart Is this expected or we can treat it as a bug? or we can add something to mention about this in documentation Loom Video: https://www.loom.com/share/e83c44c9633647f8a1e32a0044242568