最近 styled-components を触り始めています。
触っている中で便利だなと思った mixin としての使い方について書こうと思います。
styled-components 概要
- CSS in JS の一種
- JavaScript の タグ付きテンプレートリテラルを使い、Reactコンポーネントに style を適用する
- 直接 React コンポーネントを定義出来るので、
classNameによるコンポーネント - style 間のマッピングを取り除くことができる
mixin とは
sass などでおなじみだと思うので、sass公式ドキュメントの mixin の説明 を引用します。
Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left.
(意訳) Mixins は .float-left のような非セマンティックなクラスに頼ること無く、 stylesheet 全体で再利用できる style を定義できます。
以下に sass のサンプルコードを載せました。このように、継承とは違い、共通利用できる style を切り出して適用するイメージです。複数の mixin を適用することも出来ます。
=mixin-color
color: white
background: blue
=mixin-border
border-radius: 5px
.small-button
+mixin-color
+mixin-border
padding: 10px
.large-button
+mixin-color
+mixin-border
padding: 20px
styled-components での mixin の書き方
先程の sass のサンプルを styled-components で書き直してみると、このような形になります。
sample.js
import styled, { css } from 'styled-components';
const mixinColor = css`
color: white;
background: blue;
`;
const mixinBorder = css`
border-radius: 5px;
`;
const smallButton = styled.button`
${mixinColor}
${mixinBorder}
padding: 10px;
`;
const largeButton = styled.button`
${mixinColor}
${mixinBorder}
padding: 20px;
`;
styled-components の CSS helper を使うと、css を部分的に定義しておくことが出来ます。
あとは定義しておいた mixin を使いたいコンポーネントで呼び出すという形です。
styled-components は継承や関数による分岐もできますが、この形もかなり便利だと思います。