Emotionに対応したコンポーネントを追加

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
emotion-js/emotion#2041 (comment)
https://www.atnr.net/emotion-react-css-prop-error/

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>
   );
 }

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;
+  }
+`;