nextJS styled-jsx 的使用

最新推荐文章于 2025-05-12 11:12:41 发布

Chatwei

最新推荐文章于 2025-05-12 11:12:41 发布

阅读量965

点赞数

CC 4.0 BY-SA版权

分类专栏： react学习

本文链接：https://blog.youkuaiyun.com/weixin_44677431/article/details/90321311

react学习专栏收录该内容

12 篇文章

订阅专栏

博客介绍了组件的作用，一是可按需加载组件，卸载时一起卸载；二是不会形成样式命名冲突，还给出了示例。

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

作用

1.可以根据组件，按需加载，卸载时一起卸载
2.不会形成样式命名冲突

示例

import { withRouter } from 'next/router'
const Task = ({ router,fzr }) => (
    <div>
        {/* 定义当前页面样式 */}
        <style jsx>{`
            span{
                color: red;
            }
        `}</style>
        {/* 定义全局样式 */}
        <style jsx global>{`
            span{
                color: #ccc;
            }
        `}</style>
        <span>{router.query.taskName} 任务负责人：{fzr}</span>
    </div>
)
export default withRouter(Task)