File Manager

✏️ Edit File: /home/rla105zs937x/www/kalamtrophy.in/finance/node_modules/react-router/docs/explanation/styling.md

---
title: Styling
---

# Styling

[MODES: framework]

Framework mode uses the React Router Vite plugin, so the styling story is mostly just Vite's styling story.

React Router does not have a separate CSS pipeline for Framework mode. In practice, there are three patterns that matter:

1. Import CSS as a side effect
2. Use the route module `links` export
3. Render a stylesheet `<link>` directly

## Side-Effect CSS Imports

Because Framework mode uses Vite, you can import CSS files as side effects:

```tsx filename=app/root.tsx
import "./app.css";
```

```tsx filename=app/routes/dashboard.tsx
import "./dashboard.css";
```

This is often the simplest option. Global styles can be imported in `root.tsx`, and route or component styles can be imported next to the module that uses them.

## `links` Export

React Router also supports adding stylesheets through the route module `links` export.

This is useful when you want a stylesheet URL from Vite and need React Router to render a real `<link rel="stylesheet">` tag for the route:

```tsx filename=app/routes/dashboard.tsx
import dashboardHref from "./dashboard.css?url";

export function links() {
  return [{ rel: "stylesheet", href: dashboardHref }];
}
```

The `links` export feeds the [`<Links />`][links-component] component in your root route. This is the React Router-specific styling API in Framework mode. For more on route module exports, see [Route Module][route-module].

## Direct `<link>` Rendering

If you're using React 19, you can also render a stylesheet `<link>` directly in your route component:

```tsx filename=app/routes/dashboard.tsx
import dashboardHref from "./dashboard.css?url";

export default function Dashboard() {
  return (
    <>
      <link
        rel="stylesheet"
        href={dashboardHref}
        precedence="default"
      />
      <h1>Dashboard</h1>
    </>
  );
}
```

This uses React's built-in [`<link>`][react-link] support, which hoists the stylesheet into the document `<head>`. That gives you another way to colocate stylesheet tags with the route that needs them.

## Everything Else

For CSS Modules, Tailwind, PostCSS, Sass, Vanilla Extract, and other styling tools, use the normal Vite setup for those tools.

See:

- [Vite CSS Features][vite-css]
- [Vite Static Asset Handling][vite-assets]
- [`<Links />`][links-component]

[links-component]: ../api/components/Links
[react-link]: https://react.dev/reference/react-dom/components/link
[route-module]: ../start/framework/route-module
[vite-assets]: https://vite.dev/guide/assets.html
[vite-css]: https://vite.dev/guide/features.html#css

Batal

⬅ Naik ke docs 20 item

Nama	Tipe	Ukuran	Diubah	Aksi
📝backend-for-frontend.md	md	2.3 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝code-splitting.md	md	1.7 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝concurrency.md	md	7.4 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝form-vs-fetcher.md	md	11.4 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝hot-module-replacement.md	md	4.8 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝hydration.md	md	1.2 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝index-query-param.md	md	2.6 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝index.md	md	37 B	2026-06-22 23:55	✏️ Edit 👁️ View
📝lazy-route-discovery.md	md	3.2 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝location.md	md	194 B	2026-06-22 23:55	✏️ Edit 👁️ View
📝progressive-enhancement.md	md	6.2 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝race-conditions.md	md	3.7 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝react-transitions.md	md	8.5 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝route-matching.md	md	139 B	2026-06-22 23:55	✏️ Edit 👁️ View
📝server-client-execution.md	md	61 B	2026-06-22 23:55	✏️ Edit 👁️ View
📝sessions-and-cookies.md	md	15.7 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝special-files.md	md	939 B	2026-06-22 23:55	✏️ Edit 👁️ View
📝state-management.md	md	18.2 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝styling.md	md	2.6 KB	2026-06-22 23:55	✏️ Edit 👁️ View
📝type-safety.md	md	2.4 KB	2026-06-22 23:55	✏️ Edit 👁️ View