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

gaji-staff

2021.10.5

実践と知見

はじめに

こんにちは。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