web-dev-qa-db-ja.com

スタイル付きコンポーネントを拡張するには？

スタイル付きコンポーネントがあります：

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;
`;

以下は動作しますがハックです

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

スタイル付きコンポーネントを拡張する別の方法はありますか？

styled-components
7
user1283776

なぜ関数を作成したいのですか？あなたはちょうどそれのようにすることができます：

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


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