こんにちはフロントエンドエンジニアのまさにょんです!
今回は、ReactのEmotion(CSS in JS)の環境構築の方法と使い方について解説していきます。
目次
ReactのEmotion(CSS in JS)の環境構築の方法と使い方
Emotionとは?
Emotionとは、CSS in JSライブラリの1つです。
CSS in JSとは、JavaScriptのコードの中にCSSのスタイルを記述することを指します。
Emotionでは、JavaScriptのコード内でスタイルを定義し、それをReactコンポーネントに適用することができます。
以前にご紹介した、styled-componentsも、CSS in JSライブラリの1つです。
Emotion(CSS in JS)の導入・環境構築
次のコマンドで、Emotionを導入します。
npm install @emotion/react @emotion/styled
# または
yarn add @emotion/react @emotion/styled
Emotionのモジュールimport方法
Emotionは、次のようにimport
して使用します。
import
する際に、/** @jsxImportSource @emotion/react */
のおまじないを忘れずに記述してください。
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
Emotionの使い方・記述方法のSampleCode
Emotionでは、通常のCSSと同様に記述ができるので、かなり使いやすい部類のCSS in JS だと思います。
先述のstyled-componentsと同じような使い方もできるので、Emotionはおすすめです。
SampleCodeでは、EmotionStyle
の定数にCSSの定義をまとめて、JSX内でcss={EmotionStyle.プロパティ名}
の形でStyleをあてています。
他の記法もありますが、個人的には、この書き方で、CSSの定義は分離してまとめておく記法をお勧めします。
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
interface Card {
id: number;
participant: string;
affiliation: string;
}
const Test2 = () => {
/** 名前と部署の名簿情報List */
const cardList: Card[] = [
{ id: 1, participant: "ロボたま", affiliation: "エンジニア" },
{ id: 2, participant: "まりたま", affiliation: "エンジニア" },
{ id: 3, participant: "白桃", affiliation: "営業部" },
{ id: 4, participant: "ももちゃん", affiliation: "営業部" },
{ id: 5, participant: "まさぴょん", affiliation: "営業部" },
{ id: 6, participant: "まりぴょん", affiliation: "デザイナー" },
{ id: 7, participant: "ハム太郎", affiliation: "エンジニア" },
{ id: 8, participant: "ロボ太郎", affiliation: "デザイナー" },
{ id: 9, participant: "まり太郎", affiliation: "デザイナー" },
{ id: 10, participant: "ぷる玉", affiliation: "人事部" },
{ id: 11, participant: "ぷるぷる玉", affiliation: "人事部" },
{ id: 12, participant: "ロボ玉試作1号機", affiliation: "エンジニア" },
{ id: 13, participant: "ロボ玉試作2号機", affiliation: "デザイナー" },
{ id: 14, participant: "ロボ玉試作1号機", affiliation: "ロボ玉開発部" },
];
return (
<div css={EmotionStyle.cardListWrapperStyle}>
<div css={EmotionStyle.cardListContainerStyle}>
{cardList.map((card: Card, index: number) => {
// mapメソッドの内部で、条件文を記述する
if (cardList.length === index + 1) {
return (
<div>
<div css={EmotionStyle.cardStyle}>
<span>ID: {card.id}</span>|
<span>所属・部署: {card.affiliation}</span>|
<span>名前: {card.participant}</span>
</div>
<div>〜完〜</div>
</div>
);
} else {
return (
<div css={EmotionStyle.cardStyle}>
<span>ID: {card.id}</span>|
<span>所属・部署: {card.affiliation}</span>|
<span>名前: {card.participant}</span>
</div>
);
}
})}
</div>
</div>
);
};
/** EmotionStyle */
const EmotionStyle = {
/** CardList の Wrapper Style */
cardListWrapperStyle: css`
width: 80%;
margin: 0 auto;
text-align: center;
`,
/** CardList の Container Style */
cardListContainerStyle: css`
background-color: rgb(244, 246, 247);
border-radius: 8px;
padding: 12px;
`,
/** 1つの Card の Style */
cardStyle: css`
display: flex;
gap: 8px;
&:hover {
cursor: pointer;
background: #d9d9d9;
}
`,
};
export default Test2;
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!