当前位置: 首页 > 文档资料 > Next.js 中文文档 >

支持嵌入样式

优质
小牛编辑
129浏览
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查看.

内嵌样式

Examples
  • 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