fix: hide style props

chakra-ui · Feb 15, 2023 · 70ec88d · 70ec88d · vercel · Feb 15, 2023
1 parent 0969920
commit 70ec88d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/strange-pots-jog.md b/.changeset/strange-pots-jog.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Fix issue where `hideFrom` and `hideBelow` doesn't work as expected
diff --git a/packages/core/styled-system/src/config/layout.ts b/packages/core/styled-system/src/config/layout.ts
@@ -26,19 +26,19 @@ export const layout: Config = {
   hideFrom: {
     scale: "breakpoints",
     transform: (value: string, theme) => {
-      const { minWQuery = value } = theme.__breakpoints?.get(value) ?? {}
-      return {
-        [`@media screen and (min-width: ${minWQuery})`]: { display: "none" },
-      }
+      const mq =
+        theme.__breakpoints?.get(value)?.minWQuery ??
+        `@media screen and (min-width: ${value})`
+      return { [mq]: { display: "none" } }
     },
   },
   hideBelow: {
     scale: "breakpoints",
     transform: (value: string, theme) => {
-      const { maxWQuery = value } = theme.__breakpoints?.get(value) ?? {}
-      return {
-        [`@media screen and (max-width: ${maxWQuery})`]: { display: "none" },
-      }
+      const mq =
+        theme.__breakpoints?.get(value)?.maxWQuery ??
+        `@media screen and (max-width: ${value})`
+      return { [mq]: { display: "none" } }
     },
   },
   verticalAlign: true,