方法1 ——引入文件
./pages/_app.js //“next”: “12.2.4” 下的js文件
./styles/index.css //自己的css
import '../styles/globals.css'
import "../styles/index.css"
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
…/styles/index.css 内容
.tt {
color: red;
}
应用文件-Yangshi.jsx
import React, { useState } from 'react'
export default function Yangshi() {
let [color, setColor] = useState("#9966ff");
// 动态更改样式名
function handlerClick() {
color == "#9966ff" ? setColor("orange") : setColor("#9966ff");
}
return (
<div>
<div className='tt'>Yangshi</div>
<div className="aa">其他</div>
<div className='cs'>测试3</div>
<button onClick={handlerClick}>点我切换</button>
<style>
{`
.aa{
color:blue
}
.cs{
color:${color}
}
`
}
</style>
</div>
)
}
// style css 样式
方法2——JSX写法,附带动态切换样式,参考应用文件-Yangshi.jsx
<div>
<div className='tt'>Yangshi</div>
<div className="aa">其他</div>
<style>
{`
.aa{
color:blue
}
`
}
</style>
</div>