# next-样式
# 支持嵌入样式
export default () =>
<div>
Hello world
<p>scoped!</p>
<style jsx>{`
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}</style>
<style global jsx>{`
body {
background: black;
}
`}</style>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 内嵌样式
- 有些情况可以使用 CSS 内嵌 JS 写法。如下所示：
export default () => <p style={{ color: 'red' }}>hi there</p>
1
# 使用 CSS / Sass / Less / Stylus files
支持用.css, .scss, .less or .styl，需要配置默认文件 next.config.js，具体可查看下面链接