关于next.js中的css

最新推荐文章于 2025-03-18 16:27:25 发布

weixin_30352645

最新推荐文章于 2025-03-18 16:27:25 发布

阅读量399

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smart-girl/p/10158495.html

本文介绍了如何在Next.js中使用JSX语法实现CSS的局部和全局样式限制，通过具体代码示例展示了字体、背景、过渡效果及颜色的设置方法，并链接了官方GitHub仓库供进一步学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/smart-girl/p/10158495.html