Стилизация компонентов Next.js с помощью CSS

Как стилизовать компоненты React в Next.js?

Как мы стилизуем компоненты React в Next.js?

У нас есть большая свобода, потому что мы можем использовать любую библиотеку, которую предпочитаем.

Но Next.js поставляется сstyled-jsxвстроенный, потому что это библиотека, созданная теми же людьми, которые работают над Next.js.

И это довольно классная библиотека, которая предоставляет нам CSS с ограниченным объемом, который отлично подходит для удобства сопровождения, потому что CSS влияет только на компонент, к которому он применяется.

Я думаю, что это отличный подход к написанию CSS, без необходимости применять дополнительные библиотеки или препроцессоры, которые добавляют сложности.

Чтобы добавить CSS в компонент React в Next.js, мы вставляем его во фрагмент в JSX, который начинается с

<style jsx>{`

и заканчивается

`}</style>

Внутри этих странных блоков мы пишем простой CSS, как в.cssфайл:

<style jsx>{`
  h1 {
    font-size: 3rem;
  }
`}</style>

Вы пишете это внутри JSX, вот так:

const Index = () => (
  <div>
		<h1>Home page</h1>
	<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span> <span style="color:#a6e22e">jsx</span><span style="color:#f92672">&gt;</span>{<span style="color:#e6db74">`

h1 { font-size: 3rem; } `}</style> </div> )

export default Index

Внутри блока мы можем использовать интерполяцию для динамического изменения значений. Например, здесь мы предполагаемsizeprop передается родительским компонентом, и мы используем его вstyled-jsxблокировать:

const Index = props => (
  <div>
		<h1>Home page</h1>
	<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span> <span style="color:#a6e22e">jsx</span><span style="color:#f92672">&gt;</span>{<span style="color:#e6db74">`

h1 { font-size: ${props.size}rem; } `}</style> </div> )

Если вы хотите применить некоторый CSS глобально, а не в области действия компонента, вы добавляетеglobalключевое слово вstyleтег:

<style jsx global>{`
body {
  margin: 0;
}
`}</style>

Если вы хотите импортировать внешний файл CSS в компонент Next.js, вам необходимо сначала установить@zeit/next-css:

npm install @zeit/next-css

а затем создайте файл конфигурации в корне проекта с именемnext.config.js, с этим содержанием:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

После перезапуска приложения Next вы можете импортировать CSS, как обычно, с библиотеками или компонентами JavaScript:

import '../style.css'

Вы также можете напрямую импортировать файл SASS, используя@zeit/next-sassбиблиотека вместо этого.

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: