Breakpoint aliases does not seem to work with "@chakra-ui/nuxt"
See original GitHub issueDescribe the bug When using “@chakra-ui/nuxt”: “^0.1.0”, I cannot get “aliased” breakpoints to work. Using the array syntax to specify the different properties works as expected. This might be an misconfiguration but I’ve been debugging for a while and I cannot find a solution.
To Reproduce
Steps to reproduce the behavior:
Setup an nuxt app with @chakra-ui/nuxt and @nuxtjjs/emotion.
Add the following snippet to the generated index.vue component in the pages folder:
<c-heading :bg={base: 'red.500, md: 'blue.500'}>Chakra UI</c-heading>
.
The background color of the heading will always be blue.
See example below in “Additional context”
Expected behavior I expect the background color to be red until the md breakpoint is hit, at that point the background should turn blue.
Desktop (please complete the following information):
- OS: Windows 10
- Browser Chrome
- Version: 86.0.4240.75
Additional context Attaching an example of the error in an codesandbox.io container where I used the example and changed it to use the “@chakra-ui/nuxt” package. The “Hello chakra-ui/vue” heading has a background that should be red at base resolution and turn blue when the md breakpoint is hit.
https://codesandbox.io/s/chakra-ui-nuxt-demo-forked-ed87w
When I tried to do the same thing using another fork of the chakra-ui-nuxt-demo without installing “@chakra-ui/nuxt” package the breakpoint works as expected:
Issue Analytics
- State:
- Created 3 years ago
- Reactions:5
- Comments:7 (4 by maintainers)
For now, I’ve added this to
node_modules/@chakra-ui/nuxt/lib/plugin.js
using https://www.npmjs.com/package/patch-packageI think the issue is that the breakpoint alias information isn’t being copied to the theme object in
.nuxt-storybook/chakra.js
successfully.If I manually add these lines to my
.nuxt-storybook/chakra.js
then the alias and object syntax for classes starts working:(We have overridden the breakpoints to add a few extras)