styled-componentsで条件付きレンダー的なことする

https://qiita.com/taneba/items/55e04cb789b0b0dd7603
業務で、cssは全てstyled-componentsを使用して書いてます。
基本的に上記の記事を参考にして書くことが多いです。

ふとこの前、特定の条件下だけstyleを付与し条件外の場合は、
何もstyleを指定したくないな。。。と思いました。
もちろん、三項演算子を使えば、
条件外の場合にstyleのデフォルトを指定すれば良いのですが、
いちいちstyleのデフォルトを書くのが時間の無駄感あるので。。。

んー、reactの条件付きレンダー的なことをstyled-componentsでできないのかなー
と思ってたらできました。

以下具体的なコードです。

import styled, { css } from "styled-components";

const StyledDiv = styled.div<{ flag: boolean }>`
  ${({ flag }) =>
    flag &&
    css`
      color: #ffffff;
    `}
`;

こんな感じで、三項演算子を回避していい感じで書けました。
またcssというのを使ってますが、使わなくてもstyleを適用できます。

ただ、cssを使うとstyleのプロパティに対し、インテリセンス
が効くようになるので、cssつけたほうが楽かな？と思います。