@emotion/react での React コンポーネントの書き方

はじめに

こんにちは。kimizuy です。

@emotion/react を使った React コンポーネントの基本的なスタイリング例を紹介します。

@emotion/react のメリットについてはこちらの記事が詳しいです。

String Styles

ref: https://emotion.sh/docs/css-prop#string-styles

タグ付きテンプレートリテラルを使って CSS の記法を保ったままスタイルを書くことができ、個人的にはこちらを好んで使っています。

世にある CSS コードをそのままコピペして利用できるのは楽でいいのですね。

以下に例を示します。

const Button = ({ backgroundColor }) => (
  <button
    css={[
      css`
        outline: none;
        border: none;
        display: block;
        box-sizing: border-box;
        padding: 16px 32px;
        font-size: 0.75rem;
        font-weight: 600;
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 4px inset;
        text-align: center;
        background-color: ${backgroundColor}
      `
    ]}
  />
);

Object Styles

ref: https://emotion.sh/docs/css-prop#object-styles

オブジェクトでのスタイリングでも可能です。JavaScript の書き方で統一したい方はこちらですね。

以下に例を示します。

const Button = ({ backgroundColor }) => (
  <button
    css={[
      variation === "primary" && {
        backgroundColor: `rgb(236, 233, 251)`,
        color: `rgb(111, 62, 209)`
      },
      // テンプレートリテラルとの併用も可
      variation === "secondary" &&
        css`
          background-color: rgb(111, 62, 209);
          color: rgb(236, 233, 251);
        `
    ]}
  />
);>

引数を受け取るスタイル

@emotion/react の特徴的な点として、関数のように引数を受け取るスタイルを書くことができます。

const style = (args) => css`...some style`

一番最初の例を改変する形で、実際のスタイリング例を以下に示します。

const buttonStyle = (backgroundColor) =>
  css`
    outline: none;
    border: none;
    display: block;
    box-sizing: border-box;
    padding: 16px 32px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 4px inset;
    text-align: center;
    background-color: ${backgroundColor}
  `

const Button = ({ backgroundColor }) => (
  <button
    css={[buttonStyle(backgroundColor)]}
  />
);t

さいごに

@emotion/react の基本的な使い方として 3 パターンのコンポーネントの書き方をご紹介しました。

本記事が誰かのお役に立てれば幸いです。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！

求人応募してみる！

TechWatch