Add new styles to markdown

src/components/StaticSites/Markdown.tsx

@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
-import {H1, H2, H3, Li, MarkdownLink, P, Table, Td, Th} from './Texts'
+import {H1, H2, H3, Li, MarkdownLink, Ol, P, Table, Td, Th} from './Texts'
 
 type MarkdownProps = {
   content: string
@@ -25,6 +25,7 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
       h1: H1,
       h2: H2,
       h3: H3,
+      ol: Ol,
       li: Li,
     }}
   >

src/components/StaticSites/Texts.module.scss

@@ -2,11 +2,8 @@
   text-align: center;
 }
 
-.th, .td {
-  padding: 3px 1.5vw;
-}
-
 .th {
+  padding: 3px 1.5vw;
   background-color: black;
   color: white;
 }

src/components/StaticSites/Texts.module.scss.d.ts

@@ -1,6 +1,5 @@
 export type Styles = {
   table: string
-  td: string
   th: string
 }
 

src/components/StaticSites/Texts.tsx

@@ -3,6 +3,7 @@ import {FC, ReactNode} from 'react'
 import {
   HeadingProps,
   LiProps,
+  OrderedListProps,
   ReactMarkdownProps,
   TableDataCellProps,
   TableHeaderCellProps,
@@ -33,17 +34,21 @@ export const Th: FC<TableHeaderCellProps> = ({children}) => (
 )
 
 export const Td: FC<TableDataCellProps> = ({children}) => (
-  <td className={styles.td}>
-    <Typography variant="body1">{children}</Typography>
-  </td>
+  <Typography variant="body1" component="td" p={0.3}>
+    {children}
+  </Typography>
+)
+
+export const Ol: FC<OrderedListProps> = ({children}) => (
+  <Typography variant="body1" component="ol">
+    {children}
+  </Typography>
 )
 
 export const Li: FC<LiProps> = ({children}) => (
-  <li>
-    <Typography variant="body1" mt={1} component="div">
-      {children}
-    </Typography>
-  </li>
+  <Typography variant="body1" mt={1} component="li">
+    {children}
+  </Typography>
 )
 
 export const P: FC<ReactMarkdownProps> = ({children}) => (