Links function for stylesheets in Remix

Introduction

The links function in Remix helps you add CSS stylesheets to your app easily. It tells Remix which styles to load for your pages.

You want to add global CSS styles to your Remix app.

You need to include CSS files for specific routes or components.

You want to keep your styles organized and load them only when needed.

Syntax

Remix

export function links() {
  return [
    { rel: 'stylesheet', href: '/styles/global.css' }
  ];
}

The links function must return an array of objects.

Each object should have rel and href properties to specify the stylesheet.

Examples

This adds a single global stylesheet to your app.

Remix

export function links() {
  return [
    { rel: 'stylesheet', href: '/styles/global.css' }
  ];
}

This adds two stylesheets, one for header and one for footer.

Remix

export function links() {
  return [
    { rel: 'stylesheet', href: '/styles/header.css' },
    { rel: 'stylesheet', href: '/styles/footer.css' }
  ];
}

If you don't want to add any stylesheets, return an empty array.

Remix

export function links() {
  return [];
}

Sample Program

This example shows a Remix route component that uses the links function to load app.css. The styles will apply to the page content.

Remix

import { LinksFunction } from '@remix-run/node';

export const links: LinksFunction = () => {
  return [
    { rel: 'stylesheet', href: '/styles/app.css' }
  ];
};

export default function App() {
  return (
    <main>
      <h1>Welcome to Remix!</h1>
      <p>This page uses a stylesheet loaded via the links function.</p>
    </main>
  );
}

Important Notes

Make sure your CSS files are in the public folder or accessible via the href path.

The links function runs on the server and helps Remix preload styles for better performance.

Summary

The links function tells Remix which CSS files to load.

It returns an array of objects with rel and href properties.

This helps keep styles organized and improves page loading.