Next.js系列——CSS样式_next.js 使用局部样式

方法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

1
2
3
4
5
6
7
8
9

…/styles/index.css 内容

.tt {
    color: red;
}

1
2
3
4

应用文件-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 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

方法2——JSX写法，附带动态切换样式，参考应用文件-Yangshi.jsx

        <div>
            <div className='tt'>Yangshi</div>
            <div className="aa">其他</div>
            <style>
                {`
                        .aa{
                            color:blue
                        }
                 `
                }
            </style>
        </div>
1
2
3
4
5
6
7
8
9
10
11
12