Chap04 -> Styling components with Emotion -> Styling the App component (Emotion styles in head tag)

QandA/frontend/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",

QandA/frontend/src/App.module.css

@@ -1,5 +0,0 @@
-.container {
-  font-family: 'Segoe UI', 'Helvetica', sans-serif;
-  font-size: 16px;
-  color: #5c5a5a;
-}

QandA/frontend/src/App.tsx

@@ -1,11 +1,20 @@
+/** @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';
+import { fontFamily, fontSize, gray2 } from './Styles';
 
 function App() {
   return (
-    <div className={style.container}>
+    <div
+      css={css`
+        font-family: ${fontFamily};
+        font-size: ${fontSize};
+        color: ${gray2};
+      `}
+    >
       <Header />
       <HomePage />
     </div>

QandA/frontend/src/Styles.ts

@@ -0,0 +1,12 @@
+export const gray1 = '#383737';
+export const gray2 = '#5c5a5a';
+export const gray3 = '#857c81';
+export const gray4 = '#b9b9b9';
+export const gray5 = '#e3e2e2';
+export const gray6 = '#f7f8fa';
+export const primary1 = '#681c41';
+export const primary2 = '#824c67';
+export const accent1 = '#dbb365';
+export const accent2 = '#efd197';
+export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
+export const fontSize = '16px';