From b7f435a9862ccf48b7a2c32bb9d3f17293af3805 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 28 Mar 2022 17:56:13 +1100
Subject: [PATCH] Chap04 -> Styling components with Emotion -> Styling the App
 component -> style css prop use tagged template literal

---
 QandA/frontend/src/App.module.css |  5 -----
 QandA/frontend/src/App.tsx        | 12 ++++++++++--
 2 files changed, 10 insertions(+), 7 deletions(-)
 delete mode 100644 QandA/frontend/src/App.module.css

diff --git a/QandA/frontend/src/App.module.css b/QandA/frontend/src/App.module.css
deleted file mode 100644
index 74457bb..0000000
--- a/QandA/frontend/src/App.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  font-family: 'Segoe UI', 'Helvetica', sans-serif;
-  font-size: 16px;
-  color: #5c5a5a;
-}
\ No newline at end of file
diff --git a/QandA/frontend/src/App.tsx b/QandA/frontend/src/App.tsx
index 4b1e4ba..de7228e 100644
--- a/QandA/frontend/src/App.tsx
+++ b/QandA/frontend/src/App.tsx
@@ -1,11 +1,19 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { Header } from './Header';
-import style from './App.module.css';
 import { HomePage } from './HomePage';
 
 function App() {
   return (
-    <div className={style.container}>
+    <div
+      css={css`
+        font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
+        font-size: 16px;
+        color: #5c5a5a;
+      `}
+    >
       <Header />
       <HomePage />
     </div>