08.styling-components.md

 组件样式

设置

下载需要的示例程序:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls-ssr

用下面的命令运行:

npm install
npm run dv

然后, 访问 http://localhost:3000

给主页设置样式

现在, 给我们的主页添加一些样式(pages/index.js) ,用下面的代码替换 pages/index.js 文件.

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>
)

注意一下 <style jsx> 元素. 这是我们编写CSS规则的地方. 设置了样式之后, 我们的博客主页外观看起来是这样的:

在上面的代码中, 没有在 style 标签中直接编写样式, 相反它是卸载模板字符串中的.

现在, 不用模板字符串({``}), 像这样:

<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>

刷新 http://localhost:3000, 看看效果.

样式应该放在模板字符串中

Styled jsx 作为一个Babel插件, 它会解析所有的CSS, 并且在构建过程中处理(在构建过程中处理样式, 消除了运行时处理额外的开销)

在styled jsx 还支持常量值, 在将来, 你还可以在styled jsx中使用动态变量, 这就是为什么CSS需要房子啊模板字符串中.({``})

样式和嵌套组件

样式对嵌套组件无效

这是你看到的结果

如你所见, CSS规则对于嵌套在子组件中的其他元素是无效的. styled jsx 的这个特性, 让你能够在更大规模的应用中更好的, 统一的管理样式.

因此, 如果你要给你子组件设置样式, 应该在子组件上直接设置, 比如:

const PostLink = ({ post }) => (
  <li>
    <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
      <a>{post.title}</a>
    </Link>
    <style jsx>{`
      li {
        list-style: none;
        margin: 5px 0;
      }

      a {
        text-decoration: none;
        color: blue;
        font-family: "Arial";
      }

      a:hover {
        opacity: 0.6;
      }
    `}</style>
  </li>
)

获取, 可以使用 全局选择器