关于next.js中的css


css进行了全局和局部的限制

export default () => (
  <div className='hello'>
    <p>Hello World</p>
    <div className="addWords">some scoped words</div>
    <style jsx>{`
      .hello {
        font: 15px Helvetica, Arial, sans-serif;
        background: #eee;
        padding: 100px;
        text-align: center;
        transition: 100ms ease-in background;
      }
      .hello:hover {
        background: #ccc;
      }
      .addWords{
        color:red;
      }
    `}</style>
     <style global jsx>{`
      body {
        color:yellow;
      }
    `}</style>
  </div>
)

可见官方的github https://github.com/zeit/next.js/tree/canary/examples/basic-css

猜你喜欢

转载自www.cnblogs.com/smart-girl/p/10158495.html