From 5aea5ea00de504da524d01694c7e68714ead9211 Mon Sep 17 00:00:00 2001
From: Hajime MATSUMOTO <hajime.matsumoto@avap.co.jp>
Date: Sun, 8 Nov 2020 02:21:18 +0900
Subject: [PATCH] =?UTF-8?q?styled=20component=20=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
sample/frontend/.babelrc | 15 +++++++++++
sample/frontend/package.json | 5 +++-
sample/frontend/src/pages/_document.tsx | 35 +++++++++++++++++++++++++
sample/frontend/src/pages/index.tsx | 7 ++++-
4 files changed, 60 insertions(+), 2 deletions(-)
create mode 100644 sample/frontend/.babelrc
create mode 100644 sample/frontend/src/pages/_document.tsx
diff --git a/sample/frontend/.babelrc b/sample/frontend/.babelrc
new file mode 100644
index 0000000..fa58254
--- /dev/null
+++ b/sample/frontend/.babelrc
@@ -0,0 +1,15 @@
+{
+ "presets": [
+ "next/babel"
+ ],
+ "plugins": [
+ [
+ "styled-components",
+ {
+ "ssr": true,
+ "displayName": false,
+ "preprocess": false
+ }
+ ]
+ ]
+}
diff --git a/sample/frontend/package.json b/sample/frontend/package.json
index 4005464..a8cb6e8 100644
--- a/sample/frontend/package.json
+++ b/sample/frontend/package.json
@@ -13,9 +13,12 @@
"author": "",
"license": "ISC",
"dependencies": {
+ "@types/styled-components": "^5.1.4",
+ "babel-plugin-styled-components": "^1.11.1",
"next": "^10.0.0",
"react": "^17.0.1",
- "react-dom": "^17.0.1"
+ "react-dom": "^17.0.1",
+ "styled-components": "^5.2.1"
},
"devDependencies": {
"@types/node": "^14.14.5",
diff --git a/sample/frontend/src/pages/_document.tsx b/sample/frontend/src/pages/_document.tsx
new file mode 100644
index 0000000..84d9f53
--- /dev/null
+++ b/sample/frontend/src/pages/_document.tsx
@@ -0,0 +1,35 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+type Props = {
+ styleTags: any;
+};
+
+export default class MyDocument extends Document<Props> {
+ static getInitialProps({ renderPage }) {
+ const sheet = new ServerStyleSheet();
+
+ const page = renderPage((App) => (props) =>
+ sheet.collectStyles(<App {...props} />)
+ );
+
+ const styleTags = sheet.getStyleElement();
+
+ return { ...page, styleTags };
+ }
+
+ render() {
+ return (
+ <Html lang="ja">
+ <Head>
+ <meta charSet="utf-8" />
+ {this.props.styleTags}
+ </Head>
+ <body>
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ );
+ }
+}
diff --git a/sample/frontend/src/pages/index.tsx b/sample/frontend/src/pages/index.tsx
index 41b9fc6..f4dbb2f 100644
--- a/sample/frontend/src/pages/index.tsx
+++ b/sample/frontend/src/pages/index.tsx
@@ -1,6 +1,7 @@
import { NextPage } from "next";
import React from "react";
+import styled from "styled-components";
import api from "../lib/api";
import { InlineResponse200 } from "../types/typescript-axios";
@@ -18,9 +19,13 @@ const Page: NextPage = () => {
});
}, [last]);
+ const H1 = styled.h1`
+ color: red;
+ `;
+
return (
<div>
- <h1>アバップサンプル</h1>
+ <H1>アバップサンプル</H1>
<b>サーバステータス: {status.status}</b>
<br />
<b>サーバ時刻: {status.time}</b>
--
GitLab