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 样式需要用{}
进行包裹,否则就会报错。这时候你打开浏览器进行预览,字体的颜色就变成了蓝色。
自动加随机类名 不会污染全局 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
动态显示样式
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
的一些知识,有了这些知识,可以让我们的页面变得更加美观。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P07:Next.js教程-使用Style JSX编写页面的CSS样式
码云笔记 » P07:Next.js教程-使用Style JSX编写页面的CSS样式