Chap04 -> Completing the home page styling -> Styling the Question component

QandA/frontend/src/Question.tsx

@@ -1,3 +1,7 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { gray2, gray3 } from './Styles';
+
 import React from 'react';
 import { QuestionData } from './QuestionsData';
 
@@ -8,15 +12,34 @@ interface Props {
 
 export const Question = ({ data, showContent }: Props) => (
   <div>
-    <div>{data.title}</div>
+    <div
+      css={css`
+        padding: 10px 0px;
+        font-size: 19px;
+      `}
+    >
+      {data.title}
+    </div>
     {showContent && (
-      <div>
+      <div
+        css={css`
+          padding-bottom: 10px;
+          font-size: 15px;
+          color: ${gray2};
+        `}
+      >
         {data.content.length > 50
           ? `${data.content.substring(0, 50)}`
           : data.content}
       </div>
     )}
-    <div>
+    <div
+      css={css`
+        font-size: 12px;
+        font-style: italic;
+        color: ${gray3};
+      `}
+    >
       {`Ask by ${
         data.userName
       } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}