styled-components - 如何扩展样式组件？

Question

我有一个样式组件:

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

当我在组件中使用它时，我希望能够扩展它。
以下不起作用，因为“扩展”类具有较低的特异性(或在代码中):

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

以下工作但很hacky:

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

还有另一种方法来扩展样式组件吗？

Answer 1

你可以这样做:

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


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