React + Vite のプロジェクトに emotion を導入する手順

ライブラリのインストール

npm install @emotion/react 

tsconfig.jsonの修正

"compilerOptions": {
    ・・・中略・・・
    "jsxImportSource": "@emotion/react",

vite.config.ts の修正

plugins: [react({
    jsxImportSource: '@emotion/react',
  })]

スタイルの設定方法

コンポーネントのファイル内に以下のようにスタイルを定義します。

const styles = {
  container: css`
    position: relative;
    display: flex;
    flex-direction: column;
    width: 342px;
    height: 384px;
    border-radius: 16px;
    border: 1px solid #d5cab3;
    overflow: hidden;

    ${mq[Devices.Smartphone]} {
      flex-direction: row;
      width: 648px;
      height: 182px;
    },
  `
};

css プロパティ経由でスタイルを設定できます。

<div css={styles.container}>