Разработка лендингов, квизов
сайтов, web-приложений

Next.js туториал - Урок №2. 3 варианта использования CSS в Next.js

1. Встроенная поддержка styled-jsx

По умолчанию в next.js, благодаря модулю styled-jsx, поддерживается, так называемый, "изолированный" CSS. В этом случае CSS, написанный в конкретном React-компоненте никак не влияет на CSS других компонентов. Смотрим пример ниже:


export default () => (
  <div>
    Привет мир!
    <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 более подробно написано здесь.

2. Использование решения CSS-in-JS

Также возможно использовать любое CSS-in-JS решение. Самое просто из них - встраиваемые стили:


export default () => <p style={{ color: 'red' }}>hi there</p>
          

3. Импорт CSS / Sass / Less / Stylus файлов

Для поддержки импорта файлов .css, .scss, .less или .styl можно использовать следующие модули:

@zeit/next-css

@zeit/next-sass

@zeit/next-less

@zeit/next-stylus

  • next.js
  • фреймворк
  • туториал
  • css
  • styled-jsx