Emotion Styled conditionally add snippet of styles

Question

I have a styled component:

const StyledBox = styled(Box)(({theme, locked}) => ({
    width: theme.spacing(2.5),
    height: `calc(50% - 12px)`,
    borderColor: grey[500],
    borderStyle: 'solid',
    borderWidth: 0,
    borderLeftWidth: 3,
    position: 'relative',
    left: '25%',
    [theme.breakpoints.down('md')]: {
        left: '12.5%',
    },
}));


const StyledBoxUnlocked = styled(StyledBox)(({theme}) => ({
    borderLeftColor: grey[500],
    borderTopColor: 'transparent',
    borderBottomColor: 'transparent',
    borderTopWidth: 0,
    borderBottomWidth: 0,
}));

What I want is to be able to conditionally add the CSS from StyledBoxUnlocked to StyledBox based on the input of the boolean prop locked.

What is the best way to go about this?

Answer 1

You can use ternary operators and spread syntax to spread the unlocked style into the locked style if the locked property is false

const unlocked = {
    borderLeftColor: grey[500],
    borderTopColor: 'transparent',
    borderBottomColor: 'transparent',
    borderTopWidth: 0,
    borderBottomWidth: 0,
}

const StyledBox = styled(Box)(({ theme, locked }) => ({
    ...(!locked ? unlocked : {}),
    width: theme.spacing(2.5),
    height: `calc(50% - 12px)`,
    borderColor: grey[500],
    borderStyle: 'solid',
    borderWidth: 0,
    borderLeftWidth: 3,
    position: 'relative',
    left: '25%',
    [theme.breakpoints.down('md')]: {
        left: '12.5%',
    },
}));