Comment étendre les composants stylisés?

Question

J'ai un composant stylisé:

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>
    );
}

Je veux pouvoir l'étendre lorsque je l'utilise dans des composants.

Ce qui suit ne fonctionne pas car la classe "étendue" a une spécificité plus faible (ou se trouve plus tard dans le code).

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

Les travaux suivants mais hacky

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

Existe-t-il une autre façon d'étendre les composants stylisés?

Answer 1

Pourquoi voudriez-vous créer une fonction? Vous pouvez simplement faire comme ça:

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


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