add __css support

userlike · May 12, 2024 · dee2cb6 · dee2cb6
1 parent a910218
commit dee2cb6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
diff --git a/packages/chakra-ui/src/Box.tsx b/packages/chakra-ui/src/Box.tsx
@@ -20,6 +20,7 @@ export const Box = forwardRef<BoxProps, "div">(
       halign = "stretch",
       valign = "stretch",
       overflowAnchor,
+      __css,
       ...props
     },
     ref
@@ -32,6 +33,7 @@ export const Box = forwardRef<BoxProps, "div">(
         justifyContent={valign}
         alignItems={halign}
         __css={{
+          ...__css,
           overflowAnchor,
         }}
       >

diff --git a/packages/chakra-ui/src/Flex.tsx b/packages/chakra-ui/src/Flex.tsx
@@ -96,6 +96,7 @@ export const Flex = forwardRef<FlexProps, "div">(
       alignContent = "flex-start",
       wrap = false,
       overflowAnchor,
+      __css,
       ...props
     },
     ref
@@ -108,6 +109,7 @@ export const Flex = forwardRef<FlexProps, "div">(
         alignItems="stretch"
         ref={ref}
         __css={{
+          ...__css,
           overflowAnchor,
         }}
       >

diff --git a/packages/chakra-ui/src/Scrollable.tsx b/packages/chakra-ui/src/Scrollable.tsx
@@ -28,6 +28,7 @@ export const Scrollable = forwardRef<ScrollableProps, "div">(
       direction = "column",
       justifyContent = "flex-start",
       overflowAnchor,
+      __css,
       ...props
     },
     ref
@@ -48,7 +49,9 @@ export const Scrollable = forwardRef<ScrollableProps, "div">(
         flexDirection={direction}
         alignItems="stretch"
         __css={{
+          ...__css,
           overflowAnchor,
+          // ignore __css['& > *'] on purpose.
           "& > *": {
             flex: justifyContent === "stretch" ? "1 0 auto" : "0 0 auto",
             [marginStartProp(direction)]: marginStart(justifyContent),

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 | "__css"
+  keyof StyleProps
 > &
   BackgroundProps &
   BorderProps &