From 58c7e3ab065e2c4a3d28c9f144a52f678730d4e2 Mon Sep 17 00:00:00 2001
From: the-bears-field <thebearsfield+github@gmail.com>
Date: Fri, 21 Oct 2022 14:40:48 +0900
Subject: [PATCH] =?UTF-8?q?Emotion=E3=81=AB=E5=AF=BE=E5=BF=9C=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Emotion.jsxを新規作成
先頭に2行分コメントを記述し、古い方式で処理するよう設定
@emotion/reactのjsx、cssと、@emotion/styledのインポート処理を実施
Emotionコンポーネント生成
コンポーネント内でコンテナとタイトルのCSSを定義
コンテナはCSS in JSでの記述、
タイトルはインラインスタイルで記述
ボタンはStyled Componentsで記述し、コンポーネント外で変数を定義
App.jsxにEmotion.jsxのインポート処理を追加
Appコンポーネントの返り値にEmotionコンポーネントを追加

参考URL
https://www.udemy.com/course/react_stepup/learn/lecture/24823352
https://github.com/emotion-js/emotion/issues/2041#issuecomment-719819128
https://www.atnr.net/emotion-react-css-prop-error/
---
 src/App.jsx                |  2 ++
 src/components/Emotion.jsx | 39 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/components/Emotion.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 7895b55..f9a349a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import { InlineStyle } from './components/InlineStyle';
 import { CssModules } from './components/CssModules';
 import { StyledJsx } from './components/StyledJsx';
 import { StyledComponents } from './components/StyledComponents';
+import { Emotion } from './components/Emotion';
 
 export const App = () => {
   return (
@@ -12,6 +13,7 @@ export const App = () => {
       <CssModules />
       <StyledJsx />
       <StyledComponents />
+      <Emotion />
     </div>
   );
 }
diff --git a/src/components/Emotion.jsx b/src/components/Emotion.jsx
new file mode 100644
index 0000000..73e69d5
--- /dev/null
+++ b/src/components/Emotion.jsx
@@ -0,0 +1,39 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Emotion = () => {
+  const container = css`
+    align-items: center;
+    border: solid 2px;
+    border-radius: 20px;
+    display: flex;
+    justify-content: space-around;
+    margin: 8px;
+    padding: 8px;
+  `;
+
+  const title = css({
+    color: '#3d84d8',
+    margin: '0'
+  });
+
+  return (
+    <div css={container}>
+      <p css={title}>- Emotion -</p>
+      <SButton>FIGHT!!</SButton>
+    </div>
+  );
+}
+
+const SButton = styled.button`
+  background-color: #abedd8;
+  border: none;
+  border-radius: 8px;
+  padding: 8px;
+  &:hover {
+    background-color: #46cdcf;
+    color: #fff;
+  }
+`;