How to use styles in Remix

In Reactjs and Nextjs we usually use module bases styles. Remix has its own way for handling style sheets.

links

By defining and expoerting a links funtion in any component, route, Remix will apply those styles to that file. Go head and use those classes.

I gusess that , we can use multipple style sheets since the links functions return an array of style object.

import React from "react";
import styles from "./404.css";
export const links = () => {
  return [
    {
      rel: "stylesheet",
      href: styles,
    },
  ];
};
export default function NF() {
  return (
    <div>
      <div>
        <div>
          <h3>Oops! Page not found</h3>
          <h1>
            <span>4</span>
            <span>0</span>
            <span>4</span>
          </h1>
        </div>
        <h2>we are sorry, but the page you requested was not found</h2>
      </div>
    </div>
  );
}```

Wonder how Links works? In the root(root.jsx) the Links component included so no need to worry about it.

• Zustand, a minimal store for Rreactjs
• Layout roots in Remix
• Matching a non-existing/404 route in Remix
• How to use styles in Remix
• Async Data fetching in Remix