Add style to <p> in Markdown component

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 {MarkdownLink, Table, Td, Th} from './Texts'
+import {MarkdownLink, P, Table, Td, Th} from './Texts'
 
 type MarkdownProps = {
   content: string
@@ -21,6 +21,7 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
       td: Td,
       a: MarkdownLink,
       table: Table,
+      p: P,
     }}
   >
     {content}

src/components/StaticSites/Texts.module.scss

@@ -12,4 +12,8 @@
   font-weight: bold;
   font-style: italic;
   text-transform: uppercase;
+}
+
+.p {
+  padding-bottom: 1rem;
 }

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

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

src/components/StaticSites/Texts.tsx

@@ -13,3 +13,4 @@ export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => <Link h
 export const Th: FC<TableHeaderCellProps> = ({children}) => <th className={styles.th}>{children}</th>
 export const Td: FC<TableDataCellProps> = ({children}) => <td className={styles.td}>{children}</td>
 export const Table: FC<ReactMarkdownProps> = ({children}) => <table className={styles.table}>{children}</table>
+export const P: FC<ReactMarkdownProps> = ({children}) => <p className={styles.p}>{children}</p>