造型我们的主页

现在我们在主页面添加一些样式。 (pages/index.js)

只需用以下代码替换pages/index.js：

  1. import Layout from '../components/MyLayout.js'
  2. import Link from 'next/link'
  4. function getPosts () {
  5.   return [
  6.     { id: 'hello-nextjs', title: 'Hello Next.js'},
  7.     { id: 'learn-nextjs', title: 'Learn Next.js is awesome'},
  8.     { id: 'deploy-nextjs', title: 'Deploy apps with ZEIT'},
  9.   ]
  10. }
  12. export default () => (
  13.   <Layout>
  14.     <h1>My Blog</h1>
  15.     <ul>
  16.       {getPosts().map((post) => (
  17.         <li key={post.id}>
  18.           <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
  19.             <a>{post.title}</a>
  20.           </Link>
  21.         </li>
  22.       ))}
  23.     </ul>
  24.     <style jsx>{`
  25.       h1, a {
  26.         font-family: "Arial";
  27.       }
  29.       ul {
  30.         padding: 0;
  31.       }
  33.       li {
  34.         list-style: none;
  35.         margin: 5px 0;
  36.       }
  38.       a {
  39.         text-decoration: none;
  40.         color: blue;
  41.       }
  43.       a:hover {
  44.         opacity: 0.6;
  45.       }
  46.     `}</style>
  47.   </Layout>
  48. )

看看<style jsx>元素。 这是我们编写我们的CSS规则的地方。

替换此代码后，我们的博客的主页将如下所示：

造型我们的主页 - 图1

在上面的代码中，我们没有直接在样式标签中编写样式; 而是写在模板字符串中。

现在尝试直接编写CSS而不使用模板字符串（{` `}）。 像这样：

  1. <style jsx>
  2.   h1, a {
  3.     font-family: "Arial";
  4.   }
  6.   ul {
  7.     padding: 0;
  8.   }
  10.   li {
  11.     list-style: none;
  12.     margin: 5px 0;
  13.   }
  15.   a {
  16.     text-decoration: none;
  17.     color: blue;
  18.   }
  20.   a:hover {
  21.     opacity: 0.6;
  22.   }
  23. </style>

会发生什么？

  1. ✦没有变化
  2. ✦新风格不见了
  3. ✓在页面上显示错误：“SyntaxError：Unexpected token”
  4. ✦在页面上显示错误：“提供的样式无效”