P07：使用Style JSX编写页面的CSS样式

客官°小女子只卖身不卖艺 2023-10-06 21:01 13阅读 0赞

#### Next.js 教程 ####

*  阐述
 *  初识Style JSX语法 把字体设成蓝色
 *  自动加随机类名 不会污染全局CSS
 *  动态显示样式

## 阐述 ##

在Next.js中引入一个CSS样式是不可以用的，如果想用，需要作额外的配置。

因为框架为我们提供了一个 `style jsx` 特性，也就是把CSS用JSX的语法写出来。  
如果你以前学过Vue，那这种写法你是非常熟悉的。

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

在pages文件夹下，新建一个 `ycc.js` 文件。然后写入下面的代码：

function Stylejsx(){
        
        return (
            <>
                <div>willem-前端</div>
            </>
        )
    }
    
    export default Stylejsx

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

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

![在这里插入图片描述][75d45682c2314261ad491d7bd6189573.png]

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

加入了 Style jsx 代码后，Next.js 会自动加入一个随机类名，这样就防止了CSS的全局污染。

比如我们把代码写成下面这样，然后在浏览器的控制台中进行查看，你会发现自动给我们加入了类名，类似jsx-xxxxxxxx。

`next-create\pages\ycc.js`

function Stylejsx(){
        
        return (
            <>
                <div>willem前端</div>
                <div className="willem">willem前端ycc</div>
                <style jsx>
                    {
        
                        `
                        div{color:blue;}
                        .willem{color:red;}
                        `
                    }
                </style>
            </>
        )
    }
    
    export default Stylejsx

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 动态显示样式 ##

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

`next-create\pages\ycc.js`

import React, {
         useState } from 'react';
    
    function Stylejsx(){
        
        // 关键代码 start
        const [color,setColor] = useState('blue')
    
        const changeColor = () => {
        
            setColor(color=='blue'?'red':'blue')
        }
        // 关键代码 end
        return (
            <>
                <div>willem-前端</div>
                <div><button onClick={
        changeColor}>改变颜色</button></div>
                <style jsx>
                    {
        
                        `div{color:${
          color};}` 
                    }
                </style>
            </>
        )
    }
    
    export default Stylejsx

这样就完成了CSS的动态显示，是不是非常容易。  
![在这里插入图片描述][522916b243c24a3daf1e722d7cb28ffb.gif_pic_center]

[75d45682c2314261ad491d7bd6189573.png]: https://img-blog.csdnimg.cn/75d45682c2314261ad491d7bd6189573.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/55aa1e15d056425eb178c00def47c390.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[522916b243c24a3daf1e722d7cb28ffb.gif_pic_center]: https://img-blog.csdnimg.cn/522916b243c24a3daf1e722d7cb28ffb.gif#pic_center