fix sx usages by replacing sx with __css and by omitting it in prop t…

…ypes
userlike · May 12, 2024 · 192e40f · 192e40f
1 parent f4610be
commit 192e40f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/lemon-sheep-brush.md b/.changeset/lemon-sheep-brush.md
@@ -0,0 +1,5 @@
+---
+"@moblin/chakra-ui": patch
+---
+
+fix sx prop not working
diff --git a/packages/chakra-ui/src/Box.tsx b/packages/chakra-ui/src/Box.tsx
@@ -31,7 +31,7 @@ export const Box = forwardRef<BoxProps, "div">(
         direction="column"
         justifyContent={valign}
         alignItems={halign}
-        sx={{
+        __css={{
           overflowAnchor,
         }}
       >

diff --git a/packages/chakra-ui/src/Flex.tsx b/packages/chakra-ui/src/Flex.tsx
@@ -44,7 +44,7 @@ export const FlexItem = ({
       justifyContent={alignSelf ?? unsafeCoerce("var(--pcss-flex-align-items)")}
       minW={shrink > 0 ? "var(--pcss-flex-child-shrink-width)" : "auto"}
       minH={shrink > 0 ? "var(--pcss-flex-child-shrink-height)" : "auto"}
-      sx={{
+      __css={{
         "& > *": {
           flexGrow:
             alignSelf === "stretch"
@@ -107,12 +107,12 @@ export const Flex = forwardRef<FlexProps, "div">(
         flexDirection="row"
         alignItems="stretch"
         ref={ref}
-        sx={{
+        __css={{
           overflowAnchor,
         }}
       >
         <chakra.div
-          sx={{
+          __css={{
             "--pcss-flex-align-items": alignItems,
             "--pcss-flex-child-direction": isHorizontal(direction)
               ? "column"

diff --git a/packages/chakra-ui/src/Scrollable.tsx b/packages/chakra-ui/src/Scrollable.tsx
@@ -47,7 +47,7 @@ export const Scrollable = forwardRef<ScrollableProps, "div">(
         overflowY={isVertical(direction) ? unsafeCoerce(scrollMode) : "hidden"}
         flexDirection={direction}
         alignItems="stretch"
-        sx={{
+        __css={{
           overflowAnchor,
           "& > *": {
             flex: justifyContent === "stretch" ? "1 0 auto" : "0 0 auto",

diff --git a/packages/chakra-ui/src/props.ts b/packages/chakra-ui/src/props.ts
@@ -74,7 +74,7 @@ export type SafeSpaceProps = Pick<
 
 export type ContainerProps<T extends As> = Omit<
   HTMLChakraProps<T>,
-  keyof StyleProps
+  keyof StyleProps | "__css"
 > &
   BackgroundProps &
   BorderProps &