全局风格

有时，我们确实需要改变子组件中的样式。 当使用带有React的markdown时，这一点尤其如此。 您可以在我们的帖子页面看到。（pages/post.js）

这就是全球风格派上用场的地方。 现在尝试添加一些全局样式规则与样式的jsx。 将以下内容应用于pages/post.js。

在应用以下内容之前，请在应用程序中安装反应标记组件：npm install --save react-markdown

  1. import Layout from '../components/MyLayout.js'
  2. import Markdown from 'react-markdown'
  4. export default (props) => (
  5.   <Layout>
  6.    <h1>{props.url.query.title}</h1>
  7.    <div className="markdown">
  8.      <Markdown source={`
  9. This is our blog post.
  10. Yes. We can have a [link](/link).
  11. And we can have a title as well.
  13. ### This is a title
  15. And here's the content.
  16.      `}/>
  17.    </div>
  18.    <style jsx global>{`
  19.      .markdown {
  20.        font-family: 'Arial';
  21.      }
  23.      .markdown a {
  24.        text-decoration: none;
  25.        color: blue;
  26.      }
  28.      .markdown a:hover {
  29.        opacity: 0.6;
  30.      }
  32.      .markdown h3 {
  33.        margin: 0;
  34.        padding: 0;
  35.        text-transform: uppercase;
  36.      }
  37.   `}</style>
  38.   </Layout>
  39. )

会发生什么？

  1. ✦没有变化
  2. ✓应用程序可以应用于markdown内容
  3. ✦页面上的错误
  4. ✦控制台上的错误