Перейти к содержанию

Стилизация CSS

В настоящее время у вашей домашней страницы нет никаких стилей. Давайте рассмотрим различные способы стилизации вашего приложения Next.js.

Вот темы, которые мы рассмотрим

  • Как добавить глобальный CSS-файл в ваше приложение.
  • Два разных способа стилизации: Tailwind и CSS-модули.
  • Как условно добавлять имена классов с помощью пакета утилит clsx.

Глобальные стили

Если вы заглянете в папку /app/ui, то увидите файл под названием global.css. Вы можете использовать этот файл для добавления CSS-правил ко всем маршрутам в вашем приложении - например, правила сброса CSS, общие для сайта стили для HTML-элементов, таких как ссылки, и многое другое.

Вы можете импортировать global.css в любой компонент вашего приложения, но обычно рекомендуется добавлять его в компонент верхнего уровня. В Next.js это корневой макет (подробнее об этом позже).

Добавьте глобальные стили в приложение, перейдя в /app/layout.tsx и импортировав файл global.css:

/app/layout.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import '@/app/ui/global.css';

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
}

Если сервер разработки все еще работает, сохраните изменения и просмотрите их в браузере. Теперь ваша домашняя страница должна выглядеть следующим образом:

Стилизованная страница с логотипом 'Acme', описанием и ссылкой для входа

Но подождите секунду, вы же не добавили никаких CSS-правил, откуда взялись стили?

Если вы заглянете в global.css, то заметите несколько директив @tailwind:

/app/ui/global.css
1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind - это CSS-фреймворк, который ускоряет процесс разработки, позволяя вам быстро писать полезные классы прямо в коде React.

В Tailwind вы придаете стиль элементам, добавляя имена классов. Например, добавив "text-blue-500", вы сделаете текст <h1> синим:

1
<h1 className="text-blue-500">I'm blue!</h1>

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

Когда вы используете create-next-app для начала нового проекта, Next.js спросит, хотите ли вы использовать Tailwind. Если вы выберете да, Next.js автоматически установит необходимые пакеты и настроит Tailwind в вашем приложении.

Если вы посмотрите на /app/page.tsx, то увидите, что в примере мы используем классы Tailwind.

/app/page.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';

export default function Page() {
    return (
        <main className="flex min-h-screen flex-col p-6">
            {/* These are Tailwind classes: */}
            <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
                {/* ... */}
            </div>
        </main>
    );
}

Не волнуйтесь, если вы впервые используете Tailwind. Чтобы сэкономить время, мы уже стилизовали все компоненты, которые вы будете использовать.

Давайте поиграем с Tailwind! Скопируйте приведенный ниже код и вставьте его над элементом <p> в файле /app/page.tsx:

/app/page.tsx
1
2
3
<div
    className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

Какую фигуру вы видите при использовании приведенного выше фрагмента кода?

Если вы предпочитаете писать традиционные правила CSS или хранить стили отдельно от JSX - модули CSS являются отличной альтернативой.

CSS модули

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

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

Внутри /app/ui создайте новый файл home.module.css и добавьте в него следующие CSS-правила:

/app/ui/home.module.css
1
2
3
4
5
6
7
.shape {
    height: 0;
    width: 0;
    border-bottom: 30px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

Затем в файле /app/page.tsx импортируйте стили и замените имена классов Tailwind из <div>, которые вы добавили, на styles.shape:

/app/page.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';

export default function Page() {
    return (
        <main className="flex min-h-screen flex-col p-6">
            <div className={styles.shape} />
            {/* ... */}
        </main>
    );
}

Сохраните изменения и просмотрите их в браузере. Вы должны увидеть ту же форму, что и раньше.

Tailwind и модули CSS - это два наиболее распространенных способа стилизации приложений Next.js. Использовать тот или иной способ - это вопрос предпочтений, вы даже можете использовать оба в одном приложении!

В чем одно из преимуществ использования модулей CSS?

Использование библиотеки clsx для переключения имен классов

Бывают случаи, когда необходимо условно стилизовать элемент, основываясь на состоянии или каком-то другом условии.

clsx - это библиотека, позволяющая легко переключать имена классов. Для получения более подробной информации мы рекомендуем заглянуть в documentation, но вот основные способы использования:

Предположим, вы хотите создать компонент InvoiceStatus, который принимает status. Статус может быть 'pending' или 'paid'. Если статус 'paid', то цвет должен быть зеленым. Если 'pending', то цвет должен быть серым.

Вы можете использовать clsx для условного применения классов, например, так:

/app/ui/invoices/status.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import clsx from 'clsx';

export default function InvoiceStatus({
    status,
}: {
    status: string;
}) {
    return (
        <span
            className={clsx(
                'inline-flex items-center rounded-full px-2 py-1 text-sm',
                {
                    'bg-gray-100 text-gray-500':
                        status === 'pending',
                    'bg-green-500 text-white':
                        status === 'paid',
                }
            )}
        >
            {/* ... */}
        </span>
    );
}

Найдите `clsx` в редакторе кода, какие компоненты используют его для условного применения имен классов?

Другие решения для стилизации

В дополнение к рассмотренным подходам, вы также можете стилизовать свое приложение Next.js с помощью:

  • Sass, который позволяет импортировать файлы .css и .scss.
  • Библиотеки CSS-in-JS, такие как styled-jsx, styled-components и emotion.

Для получения дополнительной информации посмотрите CSS documentation.

Источник — https://nextjs.org/learn/dashboard-app/css-styling

Комментарии