16. Стилизация

Remix поддерживает множество подходов к стилизации. Выбор зависит от предпочтений команды и требований проекта.

CSS файлы

Самый простой способ — обычные CSS файлы через links:

app/routes/page.tsx

import type { LinksFunction } from "@remix-run/node";
import styles from "~/styles/page.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

Важно: стили подключаются и удаляются по мере навигации между маршрутами!

CSS Modules

// app/components/Button.module.css
.button {
  padding: 8px 16px;
  background: #3992ff;
  border-radius: 6px;
}

.button:hover {
  background: #2563eb;
}

// app/components/Button.tsx
import styles from "./Button.module.css";

export function Button({ children, onClick }) {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
}

Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init --ts

tailwind.config.ts

export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
};

app/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

// app/root.tsx
import tailwind from "~/tailwind.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: tailwind },
];

Vanilla Extract

npm install @vanilla-extract/css @vanilla-extract/vite-plugin

app/styles/button.css.ts

import { style } from "@vanilla-extract/css";

export const button = style({
  padding: "8px 16px",
  background: "#3992ff",
  borderRadius: "6px",
  ":hover": {
    background: "#2563eb",
  },
});

Styled Components / Emotion

import { ServerStyleSheet } from "styled-components";

// entry.server.tsx — нужна настройка для SSR
export default function handleRequest(
  request, responseStatusCode, responseHeaders, remixContext
) {
  const sheet = new ServerStyleSheet();
  // ...
}

Глобальные стили в root.tsx

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" },
  { rel: "stylesheet", href: globalStyles },
];