現代のWeb開発において、スタイリングは欠かせない要素の一つです。
特にReactでの開発において、コンポーネントベースのスタイリングアプローチを取り入れることは非常に有効です。
そこで注目されるのが、CSS-in-JSライブラリである「Styled-Components」です。
Styled-Componentsを使用すると、JavaScriptの中でスタイルを直接定義できるため、スタイルのカプセル化やテーマの管理が容易になります。
これによりコードの可読性が向上し、メンテナンスも簡単になります。
しかし「Styled-Componentsって何？」「どうやってReactプロジェクトに導入するの？」「実際の使い方は？」といった疑問を持つ方も多いでしょう。
この記事ではStyled-Componentsの基本からReactプロジェクトへの導入方法、そして実際の使い方までを詳しく解説します。
実際のコード例を用いて、Styled-Componentsの使い方やベストプラクティスを学んでいきましょう。
ReactにStyled-Componentsを導入する方法
styled-componentsはサードパーティ製ライブラリなのでインストールコマンドを実行してインストールする必要があります。
npm i styled-componentsインストールが完了するとstyledという名前の特別なクラスをインポートできるようになります。
このstyledに全てのHTMLタグにCSSを当てる関数が内蔵されているので、使用したいコンポーネントファイルで以下のようにインポート文を書くことになります。
import React from 'react';
// ここにインポート文を書く
import { styled } from 'styled-components';
const SStyleBasic = () => {
return (
<></>
);
};
export default SStyleBasic;続いてstyled-componentsの使い方ですが、通常のCSSのようにスタイルを宣言する書き方になります。
書き方がテンプレートリテラル関数の書き方になっていて、例えば以下のように書くことで「pタグにfont-sizeとfont-weight、colorを設定する」という意味になります。
import React from 'react';
import { styled } from 'styled-components';
const SStyleBasic = () => {
return (
<></>
);
};
// ここを追加
const Paragraph = styled.p`
font-size: 24px;
font-weight: bold;
color: #333;
`;
export default SStyleBasic;またstyled-componentsの特徴として上記コードのようにテンプレートリテラル関数を定数Paragraphのように何か別の変数、定数に再代入しておくことで、再利用が可能なコンポーネントとして振る舞うことになります。
そのため宣言したスタイルを使用するには例えば以下のように書きます。
import React from 'react';
import { styled } from 'styled-components';
const SStyleBasic = () => {
return (
<>
{/* ここを追加 */}
<Paragraph>テキスト</Paragraph>
</>
);
};
const Paragraph = styled.p`
font-size: 24px;
font-weight: bold;
color: #333;
`;
export default SStyleBasic;これでコンポーネントファイルの中で同じようなスタイルが複数ある時は<Paragraph>というコンポーネントタグを使うことでCSSを何回も書かなくて良くなります。
ちなみにテンプレートリテラル関数については以下の記事で解説していますのでご覧ください。
ReactのStyled-Componentsで入れ子や擬似クラスやメディアクエリを書く方法
Styled-Componentsの基本的な書き方を紹介したところで入れ子と擬似クラスの書き方を紹介します。
入れ子は「div p { }」のように親要素から辿って子要素のセレクタを指定する方法です。
親要素のセレクタの内側で「&」をつけることで続きに子要素のセレクタを書く形になります。
以下のコードだとdivタグの中にあるpタグにfont-sizeとfont-normalを指定しています。
~~ 中略 ~~
const Paragraph = styled.div`
font-size: 32px;
font-weight: bold;
color: red;
& p {
font-size: 16px;
font-weight: normal;
}
`;
~~ 中略 ~~同じく「&」を使うことで擬似クラスも指定することになります。
ホバーやセレクタ指定など通常であれば「セレクタ名：hover 」のように書く部分です。
以下のコードだとdivタグにホバーされた時にdivタグのcolorをblueにするようになります。
~~ 中略 ~~
const Paragraph = styled.div`
font-size: 32px;
font-weight: bold;
color: red;
& p {
font-size: 16px;
font-weight: normal;
}
&:hover {
color: blue;
}
`;
~~ 中略 ~~さらに「&」を使うことでメディアクエリを書くことになりレスポンシブ対応ができます。
以下のコードだと横幅767px以下の画面でdivタグのfont-sizeを16pxにするようになっています。
~~ 中略 ~~
const Paragraph = styled.div`
font-size: 32px;
font-weight: bold;
color: red;
& p {
font-size: 16px;
font-weight: normal;
}
&:hover {
color: blue;
}
@media (max-width: 767px) {
& {
font-size: 16px;
}
}
`;
~~ 中略 ~~ReactのStyled-Componentsで条件付きスタイルを書く方法
特定のケースでスタイルに変えるようなバリエーションを持たせたい時があります。
Styled-Componentsではpropsの仕組みを使って条件付きスタイルを書くことになります。
import React, { useState } from 'react';
import { styled } from 'styled-components';
const SStyleConditional = () => {
const [error, setError] = useState(false);
return (
// $propsで渡して条件付きスタイル
<Container props.$error={error}>
ダミーテキストです
</Container>
);
};
export default SStyleConditional;
const Container = styled.div`
text-align: left;
color: ${(props) => (props.$error ? 'red' : 'blue')};
`;上記コードではまずuseStateでerrorというステートを管理しています。
errorがあるとtrueになり、初期値はfalseを取っている状態で、そのtrueとfalseによってスタイルを変えている例です。
propsに「$error」という識別子を作って受け取ったtrueとfalseによって文字色を変えることになっています。
識別子のキーワードは自由ですが先頭に「$」をつけるのはReactのルールになっており「$」がないとWarningが出力されますので注意してください。
ちなみにpropsはオブジェクトですので分割代入の書き方が一般的です。
import React, { useState } from 'react';
import { styled } from 'styled-components';
const SStyleConditional = () => {
const [error, setError] = useState(false);
return (
// ここを変更
<Container $error={error}>
ダミーテキストです
</Container>
);
};
export default SStyleConditional;
const Container = styled.div`
text-align: left;
// ここを変更
color: ${({$error}) => ($error ? 'red' : 'blue')};
`;