import { Outlet } from "remix" ; import type { MetaFunction , LinksFunction } from "remix" ; import stylesUrl from "~/styles/demos/about.css" ; export let meta = ( ) => { return { title : "About Remix" } ; } ; export let links = ( ) => { return [ { rel : "stylesheet" , href : stylesUrl } ] ; } ; export default function Index ( ) { return ( < div className = "about" > < div className = "about__intro" > < h2 > About Us < /h2> < p > Ok , so this page isn 't really <em>about us</em>, but we did want to show you a few more things Remix can do . < /p> < p > Did you notice that things look a little different on this page ? The CSS that we import in the route file and include in its { " " } < code > links < /code> export is only included on this route and its children . < /p> < p > Wait a sec ... < em > its children < /em>? To understand what we mean by this , { " " } < a href = "https://remix.run/tutorial/4-nested-routes-params" > read all about nested routes in the docs < /a> . < /p> < hr / > < Outlet /> < /div> < /div>); }