对嵌套组件没有影响

这是你所看到的：

对嵌套组件没有影响 - 图1

如您所见，CSS规则对子组件中的元素没有影响。

styled-jsx的这个功能可以帮助您管理更大的应用程序的样式。

在这种情况下，您需要直接对子组件进行风格化。 在我们的特殊情况下，我们需要为我们的Link组件做到这一点：

  1. const PostLink = ({ post }) => (
  2.   <li>
  3.     <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
  4.       <a>{post.title}</a>
  5.     </Link>
  6.     <style jsx>{`
  7.       li {
  8.         list-style: none;
  9.         margin: 5px 0;
  10.       }
  12.       a {
  13.         text-decoration: none;
  14.         color: blue;
  15.         font-family: "Arial";
  16.       }
  18.       a:hover {
  19.         opacity: 0.6;
  20.       }
  21.     `}</style>
  22.   </li>
  23. )

否则你可以使用 global selectors.