💅

Styled Componentsを無闇に使わないで

2022/06/05に公開

当記事はnoteに移転しました。

個人的には、styled-components以外でもdata-属性を使ってSCっぽさを取り入れた書き方をするのが好きです。
次のような感じです。クラス名をいくつも組み合わせるよりもすっきり書ける印象があります。

export const C: FC<{kind: 'a' | 'b'}> = ({kind}) =>
  <div className='box' data-kind={kind}></div>

.box[data-kind=a] {
  background: red;
}

.box[data-kind=b] {
  background: blue;
}

コメントありがとうございます！data属性は文字列結合をしなくてよく私としてもエレガントに感じますが、今回のテーマではなるべく簡素な方に寄せたいので省略させていただきました。

突然の投稿すみません。
初めまして、スッキリシンプルで綺麗ですね。
参考にさせて頂きます。