React.js

EmotionをReactで使ってみた

本記事ではReactとEmotionを組み合わせてReactアプリケーションのコンポーネントのスタイリング方法を解説します。

Emotionとは

EmotionはCSS in JSのフレームワークで、JSファイルの中にcssを記述することを可能にします。

Reactとの親和性があると巷で言われています。

https://emotion.sh/docs/@emotion/react

環境構築

以下の手順で環境構築をします

 Reactプロジェクトの作成

create-react-appコマンドを使用してReactプロジェクトを作成します。

必要なパッケージのインストール

Emotionをプロジェクトに追加するために、以下のコマンドを実行します。

これにより、@emotion/react@emotion/styledの2つのパッケージがインストールされます。

基本的な使い方

ReactとEmotionを組み合わせる方法はいくつかありますが。ここでは@emotion/react@emotion/styledを使った方法について紹介します。

@emotion/reactを使ったスタイリング

@emotion/reactを使ったスタイリングをするにはcss関数をインポートし、それを使ってスタイルを定義します。

注意点としてcssをインポートするコンポーネントでは先頭に/** @jsxImportSource @emotion/react */とコメントアウトをする必要があります。

App.jsを以下のように編集します。

@emotion/styledを使ったスタイリング

@emotion/styledを使ってスタイリングするには、まずstyled関数をインポートします。

それを使ってスタイル付きのコンポーネントを作成します。

 

-React.js

© 2024 Shiro's secret base