new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

React Router · Guides · all subjects

styling

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Framework mode styling uses Vite

React Router Framework mode uses the React Router Vite plugin, so the styling story is mostly Vite's styling story. React Router does not have a separate CSS pipeline for Framework mode.

Three main styling patterns in Framework mode

Framework mode supports three patterns for styling: (1) Import CSS as a side effect, (2) Use the route module links export, and (3) Render a stylesheet <link> directly.

Side-effect CSS imports in Framework mode

You can import CSS files as side effects because Framework mode uses Vite. Global styles can be imported in root.tsx, and route or component styles can be imported next to the module that uses them. Example: import "./app.css"; in app/root.tsx or import "./dashboard.css"; in app/routes/dashboard.tsx.

links export for stylesheets

React Router 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. The links export feeds the <Links /> component in your root route.

links export example

import dashboardHref from "./dashboard.css?url"; export function links() { return [{ rel: "stylesheet", href: dashboardHref }]; }

Direct link rendering with React 19

If you're using React 19, you can render a stylesheet <link> directly in your route component. This uses React's built-in <link> support, which hoists the stylesheet into the document <head>, allowing you to colocate stylesheet tags with the route that needs them.

Direct link rendering example with React 19

import dashboardHref from "./dashboard.css?url"; export default function Dashboard() { return ( <> <link rel="stylesheet" href={dashboardHref} precedence="default" /> <h1>Dashboard</h1> </> ); }

CSS Modules, Tailwind, PostCSS, Sass in Framework mode

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

Give your agent this brain