P07:Next.js教程-使用Style JSX编写页面的CSS样式

Next.js中引入一个CSS样式是不可以用的,如果想用,需要作额外的配置。因为框架为我们提供了一个style jsx特性,也就是把CSS用JSX的语法写出来。如果你以前学过Vue,那这种写法你是非常熟悉的。

初识Style JSX语法 把字体设成蓝色

pages文件夹下,新建一个jspang.js文件。然后写入下面的代码:

function Stylejsx(){
    return (
        <>
            <div>码云笔记-前端博客|前端教程</div>
        </>
    )
}

export default Stylejsx

这个是一个最简单的页面,只在层中写了一句话。这时候我们想把页面中字的颜色变成蓝色,就可以使用Style JSX语法。直接在<></>之间写下如下的代码:

<style jsx>
   {
      `div{color:blue;}`
   }
</style>

主要所有的css样式需要用{}进行包裹,否则就会报错。这时候你打开浏览器进行预览,字体的颜色就变成了蓝色。

Next.js教程-使用Style JSX编写页面的CSS样式

自动加随机类名 不会污染全局CSS

加入了Style jsx代码后,Next.js会自动加入一个随机类名,这样就防止了CSS的全局污染。比如我们把代码写成下面这样,然后在浏览器的控制台中进行查看,你会发现自动给我们加入了类名,类似jsx-xxxxxxxx

function Stylejsx(){
    return (
        <>
            <div>码云笔记-前端博客|前端教程</div>
            <div className="mybj">码云笔记-前端博客|前端教程</div>
            <style jsx>
                {
                    `div{color:blue;}
                    .mybj{color:red;}
                    `
                }
            </style>
        </>
    )
}

export default Stylejsx

自动加随机类名 不会污染全局CSS

动态显示样式

Next.js使用了Style jsx,所以定义动态的CSS样式就非常简单,比如现在要作一个按钮,点击一下,字体颜色就由蓝色变成了红色。下面是实现代码。

import React, { useState } from 'react';
function Stylejsx(){
    // 关键代码 start
    const [color,setColor] = useState('blue')

    const changeColor = () => {
        setColor(color=='blue'?'red':'blue')
    }
    // 关键代码 end
    return (
        <>
            <div>码云笔记-前端博客|前端教程</div>
            <div><button onClick={changeColor}>改变颜色</button></div>
            <style jsx>
                {
                    `div{color:${color};}` 
                }
            </style>
        </>
    )
}

export default Stylejsx

这样就完成了CSS的动态显示,是不是非常容易。

Style jsx动态显示样式

总结

本文主要学习了Style jsx的一些知识,有了这些知识,可以让我们的页面变得更加美观。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P07:Next.js教程-使用Style JSX编写页面的CSS样式

发表评论

提供最优质的资源集合

立即查看 了解详情