if statement inside styled component

Question

export enum SizeEnum {
    Small,
    Large
}

export interface ICheckbox {
    Size: SizeEnum;
}

const Box = styled.div`
    height: 20px;
    width: 20px;
`

In the above code I want to be able to conditionally change the height and width value of <Box> based on the prop. How do I do this?

Answer 1

Another way to do this, if you want to add several css styles.

const Box = styled.div`
    height:100px;
    width:100px;
    ${props => props.Size === 'Small' && css`
         height:20px;
         width:20px;
    `}
`