Merge pull request #9 from nek0meshi/styled-components

Styled components

README.md

@@ -6,3 +6,5 @@
   * https://github.com/vercel/next.js/tree/canary/examples/blog-starter
 * Render Markdown
   * https://nextjs.org/learn/basics/dynamic-routes/render-markdown
+* "Prop `className` did not match."への対処
+  * https://zenn.dev/nbr41to/articles/c0c691653e3d55

frontend/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["babel-plugin-styled-components"]
+}

frontend/components/ArticleContent.tsx

@@ -1,5 +1,17 @@
+import styled from 'styled-components'
 import dayjs from '@/lib/dayjs'
-import styles from './ArticleContent.module.scss'
+
+const Article = styled.article`
+  h1 {
+    font-size: 2em;
+  }
+  h2 {
+    font-size: 1.5em;
+  }
+  h3 {
+    font-size: 1.2em;
+  }
+`
 
 type Props = {
   content: string
@@ -9,11 +21,11 @@ type Props = {
 
 const ArticleContent = ({ content, title, date }: Props) => {
   return (
-    <article className={styles.ArticleContent}>
+    <Article>
       <small>{date.format('YYYY-MM-DD')}</small>
       <h1>{title}</h1>
       <div dangerouslySetInnerHTML={{ __html: content }} />
-    </article>
+    </Article>
   )
 }