はじめに
今回は"Styling Components"をやっていきましょう。
実はこの次のレッスンはデプロイについてなので、かなり終盤に近付いてきました。
ゴールに向かって頑張りましょう!
セットアップ
前回同様引き続き使っていきます。
ページをスタイリングする
pagesフォルダのindex.jsを以下のコードのようにします。
import Layout from '../components/MyLayout.js' import Link from 'next/link' function getPosts () { return [ { id: 'hello-nextjs', title: 'Hello Next.js'}, { id: 'learn-nextjs', title: 'Learn Next.js is awesome'}, { id: 'deploy-nextjs', title: 'Deploy apps with ZEIT'}, ] } export default () => ( <Layout> <h1>My Blog</h1> <ul> {getPosts().map((post) => ( <li key={post.id}> <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}> <a>{post.title}</a> </Link> </li> ))} </ul> <style jsx>{` h1, a { font-family: "Arial"; } ul { padding: 0; } li { list-style: none; margin: 5px 0; } a { text-decoration: none; color: blue; } a:hover { opacity: 0.6; } `}</style> </Layout> )
これがCSSのルールを書く方法になります。
ローカルホストを見ると、
また、以下のようなコードでも同様の結果を得られます。
export default () => ( <Layout> <h1>My Blog</h1> <ul> {getPosts().map((post) => ( <PostLink key={post.id} post={post}/> ))} </ul> <style jsx>{` h1, a { font-family: "Arial"; } ul { padding: 0; } li { list-style: none; margin: 5px 0; } a { text-decoration: none; color: blue; } a:hover { opacity: 0.6; } `}</style> </Layout> )
グローバルスタイル
コマンドプロンプトに次のコードを打ち込みましょう。
npm install --save react-markdown
そして、pagesフォルダの中のpost.jsを書き換えます。
import Layout from '../components/MyLayout.js' import {withRouter} from 'next/router' import Markdown from 'react-markdown' export default withRouter((props) => ( <Layout> <h1>{props.router.query.title}</h1> <div className="markdown"> <Markdown source={` This is our blog post. Yes. We can have a [link](/link). And we can have a title as well. ### This is a title And here's the content. `}/> </div> <style jsx global>{` .markdown { font-family: 'Arial'; } .markdown a { text-decoration: none; color: blue; } .markdown a:hover { opacity: 0.6; } .markdown h3 { margin: 0; padding: 0; text-transform: uppercase; } `}</style> </Layout> ))
そしてローカルホストを見ましょう。