diff --git a/packages/chakra-ui/src/Box.tsx b/packages/chakra-ui/src/Box.tsx index 37b3681..cb42880 100644 --- a/packages/chakra-ui/src/Box.tsx +++ b/packages/chakra-ui/src/Box.tsx @@ -20,6 +20,7 @@ export const Box = forwardRef( halign = "stretch", valign = "stretch", overflowAnchor, + __css, ...props }, ref @@ -32,6 +33,7 @@ export const Box = forwardRef( justifyContent={valign} alignItems={halign} __css={{ + ...__css, overflowAnchor, }} > diff --git a/packages/chakra-ui/src/Flex.tsx b/packages/chakra-ui/src/Flex.tsx index f401740..a61b9a1 100644 --- a/packages/chakra-ui/src/Flex.tsx +++ b/packages/chakra-ui/src/Flex.tsx @@ -96,6 +96,7 @@ export const Flex = forwardRef( alignContent = "flex-start", wrap = false, overflowAnchor, + __css, ...props }, ref @@ -108,6 +109,7 @@ export const Flex = forwardRef( alignItems="stretch" ref={ref} __css={{ + ...__css, overflowAnchor, }} > diff --git a/packages/chakra-ui/src/Scrollable.tsx b/packages/chakra-ui/src/Scrollable.tsx index f2847a9..310734b 100644 --- a/packages/chakra-ui/src/Scrollable.tsx +++ b/packages/chakra-ui/src/Scrollable.tsx @@ -28,6 +28,7 @@ export const Scrollable = forwardRef( direction = "column", justifyContent = "flex-start", overflowAnchor, + __css, ...props }, ref @@ -48,7 +49,9 @@ export const Scrollable = forwardRef( 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 index 7e4f966..93259f2 100644 --- 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 = Omit< HTMLChakraProps, - keyof StyleProps | "__css" + keyof StyleProps > & BackgroundProps & BorderProps &