支持嵌入样式
优质
小牛编辑
127浏览
2023-12-01
- Basic css
我们绑定 styled-jsx 来生成独立作用域的 CSS. 目标是支持 "shadow CSS",但是 不支持独立模块作用域的 JS.
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>
想查看更多案例可以点击 styled-jsx documentation查看.
内嵌样式
- Styled components
- Styletron
- Glamor
- Glamorous
- Cxs
- Aphrodite
- Fela
有些情况可以使用 CSS 内嵌 JS 写法。如下所示:
export default () => <p style={{ color: 'red' }}>hi there</p>
更复杂的内嵌样式解决方案,特别是服务端渲染的时样式更改。我们可以通过包裹自定义 Document,来添加样式,案例如下:custom <Document>
使用 CSS / Sass / Less / Stylus files
支持用.css
, .scss
, .less
or .styl
,需要配置默认文件 next.config.js,具体可查看下面链接
- @zeit/next-css
- @zeit/next-sass
- @zeit/next-less
- @zeit/next-stylus