search

jameslnewell / styled-components-breakpoint

Utility function for using breakpoints with styled-components 💅.
243 stars 17 forks source link

css prop returns [object, object] #23

Open najandz opened 4 years ago

najandz commented 4 years ago

Thanks for the wonderful solution, I've created a Grid component and would like to change the direction of flex based on breakpoint but I am getting value as [object, object]

<div **direction="[object Object]"** class="Grid-sc-9kgu6b-0 vwGqw" size="100" wrap="nowrap">

const flexDirection = ({ direction }) => map(direction, val => (console.log(val),flex-direction: ${val};)); const Grid = styled.div ${width}; display: flex; align-items: ${props => props.alignItems}; align-content: ${props => props.alignContent}; &&& { ${flexDirection}; } flex-wrap: ${props => props.wrap}; justify-content: ${props => props.justifyContent};

&.debug * {
    outline: 1px solid red;
}

; <Grid direction={{ mobile: "column-reverse", tablet: "row", desktop: "row" }}>