How to extend styled components?

Question

I have a styled component:

interface FlexContainerProps {
    children: any;
    className?: string;
}
    
function FlexContainer(props: FlexContainerProps) {
    const Container = styled.div`
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    `;
    return (
        <Container className={props.className}>
            {props.children}
        </Container>
    );
}

I want to be able to extend it when I use it in components.

The following does not work because the "extended" class has lower specificity (or is later in the code):

const FlexContainerExtended = styled(FlexContainer)`
    flex-direction: column-reverse;
`;

The following works but is hacky:

const FlexContainerExtended = styled(FlexContainer)`
    flex-direction: column-reverse !important;
`;

Is there another way to extend styled components?

Answer 1

You can just do like this:

const FlexContainer = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
`;


const FlexContainerExtended = styled(FlexContainer)`
    flex-direction: column-reverse;
`;