UNPKG

2.6 kB Markdown View Raw
1---
2title: Styling
3---
4
5# Styling
6
7[MODES: framework]
8
9Framework mode uses the React Router Vite plugin, so the styling story is mostly just Vite's styling story.
10
11React Router does not have a separate CSS pipeline for Framework mode. In practice, there are three patterns that matter:
12
131. Import CSS as a side effect
142. Use the route module `links` export
153. Render a stylesheet `<link>` directly
16
17## Side-Effect CSS Imports
18
19Because Framework mode uses Vite, you can import CSS files as side effects:
20
21```tsx filename=app/root.tsx
22import "./app.css";
23```
24
25```tsx filename=app/routes/dashboard.tsx
26import "./dashboard.css";
27```
28
29This 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.
30
31## `links` Export
32
33React Router also supports adding stylesheets through the route module `links` export.
34
35This 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:
36
37```tsx filename=app/routes/dashboard.tsx
38import dashboardHref from "./dashboard.css?url";
39
40export function links() {
41 return [{ rel: "stylesheet", href: dashboardHref }];
42}
43```
44
45The `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].
46
47## Direct `<link>` Rendering
48
49If you're using React 19, you can also render a stylesheet `<link>` directly in your route component:
50
51```tsx filename=app/routes/dashboard.tsx
52import dashboardHref from "./dashboard.css?url";
53
54export default function Dashboard() {
55 return (
56 <>
57 <link
58 rel="stylesheet"
59 href={dashboardHref}
60 precedence="default"
61 />
62 <h1>Dashboard</h1>
63 </>
64 );
65}
66```
67
68This 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.
69
70## Everything Else
71
72For CSS Modules, Tailwind, PostCSS, Sass, Vanilla Extract, and other styling tools, use the normal Vite setup for those tools.
73
74See:
75
76- [Vite CSS Features][vite-css]
77- [Vite Static Asset Handling][vite-assets]
78- [`<Links />`][links-component]
79
80[links-component]: ../api/components/Links
81[react-link]: https://react.dev/reference/react-dom/components/link
82[route-module]: ../start/framework/route-module
83[vite-assets]: https://vite.dev/guide/assets.html
84[vite-css]: https://vite.dev/guide/features.html#css