Chargement de style spécifique à une page

Dans nos applications, nous avons parfois du style utilisé spécifiquement sur une page. Dans le but de limité les chargements inutiles, Remix va nous permettre d'exporter depuis un module route une fonction links. Cette fonction va nous permettre d'injecter des liens lorsque l'utilisateur va visiter la page associée.

EXERCICE

Changer la couleur de fond de votre application lorsque l'utilisateur visite la page des playlists.

Guide

💿 Définir une fonction links dans le module route

En savoir plus

Voir la section links dans la doc.

Voir une solution

app/routes/_layout.playlists.$id.(edit).tsx

export const links = () => {
  return [];
};

💿 Créer une feuille de style dans le dossier styles et ajouter votre code CSS

Voir une solution

app/styles/edit-style.css

body {
  background-color: orange;
}

💿 Ajouter un html link descriptor permettant d'ajouter une feuille de style

Cette fonction retourne un tableau de HTMLlinkDescriptor (Voir docs MDN) ou des PageLinkDescriptor.

Ici, nous allons utiliser un HTMLLinkDescriptor pour qu'une base <link /> soit ajouter dans notre page pour charger notre feuille de style.

Voir une solution

app/routes/_layout.playlists.$id.(edit).tsx

import editStylesheet from "~/styles/edit-style.css";

export const links = () => {
  return [
    { rel: "stylesheet", href: editStylesheet },
  ];
};

👏 Nous savons maintenant comment ajouter de style pour une route spécifique.

Ajoutons maintenant la possibilité de retirer des tracks de la playlist.