Markdown用のComponentをCSS Modulesに置換え

src/components/MarkdownContents/MarkdownContents.module.css

@@ -0,0 +1,19 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 750px;
+  font-family: Roboto, sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  line-height: 25px;
+  text-align: left;
+  overflow-wrap: normal;
+  list-style-position: inside;
+}
+
+@media (max-width: 767px) {
+  .wrapper {
+    max-width: 380px;
+  }
+}

src/components/MarkdownContents/MarkdownContents.module.css.d.ts

@@ -0,0 +1,4 @@
+declare const styles: {
+  readonly wrapper: string;
+};
+export = styles;

src/components/MarkdownContents/MarkdownContents.tsx

@@ -1,31 +1,13 @@
 import type { FC } from 'react';
 import ReactMarkdown from 'react-markdown';
-import styled from 'styled-components';
-import { mixins } from '../../styles';
-
-const _Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  max-width: 750px;
-  font-family: Roboto, sans-serif;
-  font-size: 20px;
-  font-style: normal;
-  line-height: 25px;
-  text-align: left;
-  overflow-wrap: normal;
-  list-style-position: inside;
-  @media (max-width: ${mixins.mediaQuerySize.default}) {
-    max-width: 380px;
-  }
-`;
+import styles from './MarkdownContents.module.css';
 
 export type Props = {
   markdown: string;
 };
 
 export const MarkdownContents: FC<Props> = ({ markdown }) => (
-  <_Wrapper className="markdown">
+  <div className={`markdown ${styles.wrapper}`}>
     <ReactMarkdown>{markdown}</ReactMarkdown>
-  </_Wrapper>
+  </div>
 );

src/components/MarkdownPageTitle/MarkdownPageTitle.module.css

@@ -0,0 +1,8 @@
+.title {
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+  color: var(--text-color);
+}

src/components/MarkdownPageTitle/MarkdownPageTitle.module.css.d.ts

@@ -0,0 +1,4 @@
+declare const styles: {
+  readonly title: string;
+};
+export = styles;

src/components/MarkdownPageTitle/MarkdownPageTitle.tsx

@@ -1,20 +1,10 @@
 import type { FC } from 'react';
-import styled from 'styled-components';
-import { mixins } from '../../styles';
-
-const _Title = styled.h1`
-  font-family: Roboto, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 28px;
-  color: ${mixins.colors.text};
-`;
+import styles from './MarkdownPageTitle.module.css';
 
 export type Props = {
   text: string;
 };
 
 export const MarkdownPageTitle: FC<Props> = ({ text }) => (
-  <_Title>{text}</_Title>
+  <h1 className={styles.title}>{text}</h1>
 );