css - テーマに合わせたスタイルのコンポーネントは、小道具とテーマを組み合わせます

Question

好奇心のために、私は React アプリケーションで styled-components を使用しており、そこで提案されたテーマを使用して、すべての色とサイズをどこでも利用できるようにしています。

現在、私は次のようにしています：

export const TestComponent = styled.div`
    color: ${({ theme }) => theme.white};
    background-color: ${({ theme }) => theme.white};
    border: 1px solid ${({ theme }) => theme.white};
    display: ${({ check }) => check ? 'block' : 'none'};
`;

そのため、のテーマThemeProviderと外部コンポーネントの追加チェックを使用しています。

私の質問は今、なぜこのように使用できないのかです:

export const TestComponent = styled.div`${({ theme, check }) => (css`
    color: ${theme.white};
    background-color: ${theme.white};
    border: 1px solid ${theme.white};
    display: ${check ? 'block' : 'none'};
`)`;

もっと便利で使いやすいと思いませんか？もしそうなら、なぜ彼らはこのように提案しないのですか? 現時点では見えない大きな欠点があるのではないかと心配しています。