npm i styled-valuesimport styled from 'styled-components'
import v from 'styled-values'
interface FlexboxProps {
row: boolean;
col: boolean;
reversed: boolean;
}
export const Flexbox = styled.div<Partial<FlexboxProps>>`
display: flex;
width: 100%;
height: 100%;
flex-direction: ${v(({ row, col, reversed }) => ({
'row-reverse': row && reversed,
'col-reverse': col && reversed,
column: col,
row,
}))};
align-items: center;
border-radius: 4px;
`Make sure the value mappings are sorted from most specific to least specific.
styled-valueswill simply return the first entry with a truthy value. That is whycol && reversedetc. were placed before justcolorrow.