常规 CSS

Remix 通过嵌套路由和 links 帮助您扩展具有常规 CSS 的应用程序。

CSS 维护问题可能会因以下几个原因潜入 Web 应用程序。可能很难知道

如何以及何时加载 CSS，因此通常会在每个页面上加载所有 CSS
您正在使用的类名和选择器是否意外地对应用程序中的其他 UI 进行了样式设置
随着 CSS 源代码时间的推移，某些规则是否不再使用

Remix 通过基于路由的样式表缓解了这些问题。嵌套路由可以各自将自己的样式表添加到页面中，并且 Remix 将自动预取、加载和卸载它们以及路由。当关注范围仅限于活动路由时，这些问题的风险将大大降低。唯一的冲突机会是与父路由的样式（即便如此，您很可能会看到冲突，因为父路由也在渲染）。

如果您使用的是经典 Remix 编译器而不是 Remix Vite，则应从 CSS 导入路径的末尾删除 ?url。

路由样式

每个路由都可以向页面添加样式链接，例如

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import styles from "~/styles/dashboard.css?url";

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

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import styles from "~/styles/accounts.css?url";

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

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import styles from "~/styles/sales.css?url";

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

给定这些路由，下表显示了哪些 CSS 将应用于特定 URL

URL	样式表
/dashboard	dashboard.css
/dashboard/accounts	dashboard.css accounts.css
/dashboard/sales	dashboard.css sales.css

这很微妙，但这个小功能消除了使用纯样式表来设置应用程序样式时的许多困难。

共享组件样式

无论大小，网站通常都有一组在应用程序其余部分使用的共享组件：按钮、表单元素、布局等。在 Remix 中使用纯样式表时，我们推荐两种方法。

共享样式表

第一种方法非常简单。将它们全部放在 app/root.tsx 中包含的 shared.css 文件中。这使得组件本身可以轻松共享 CSS 代码（并且您的编辑器可以为诸如自定义属性之类的东西提供智能感知），并且每个组件无论如何都需要在 JavaScript 中使用唯一的模块名称，因此您可以将样式限定为唯一的类名或数据属性

/* scope with class names */
.PrimaryButton {
  /* ... */
}

.TileGrid {
  /* ... */
}

/* or scope with data attributes to avoid concatenating
   className props, but it's really up to you */
[data-primary-button] {
  /* ... */
}

[data-tile-grid] {
  /* ... */
}

虽然此文件可能会变得很大，但它将位于应用程序中所有路由共享的单个 URL 上。

这也使得路由可以轻松调整组件的样式，而无需向该组件的 API 添加官方的新变体。您知道它不会影响除 /accounts 路由之外的任何地方的组件。

.PrimaryButton {
  background: blue;
}

浮现样式

第二种方法是为每个组件编写单独的 css 文件，然后将样式“浮现”到使用它们的路由。

也许您在 app/components/button/index.tsx 中有一个 <Button>，其样式位于 app/components/button/styles.css，以及一个扩展它的 <PrimaryButton>。

请注意，这些不是路由，但它们像路由一样导出 links 函数。我们将使用它将它们的样式浮现到使用它们的路由中。

[data-button] {
  border: solid 1px;
  background: white;
  color: #454545;
}

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import styles from "./styles.css?url";

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

export const Button = React.forwardRef(
  ({ children, ...props }, ref) => {
    return <button {...props} ref={ref} data-button />;
  }
);
Button.displayName = "Button";

然后是一个扩展它的 <PrimaryButton>

[data-primary-button] {
  background: blue;
  color: white;
}

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import { Button, links as buttonLinks } from "../button";

import styles from "./styles.css?url";

export const links: LinksFunction = () => [
  ...buttonLinks(),
  { rel: "stylesheet", href: styles },
];

export const PrimaryButton = React.forwardRef(
  ({ children, ...props }, ref) => {
    return (
      <Button {...props} ref={ref} data-primary-button />
    );
  }
);
PrimaryButton.displayName = "PrimaryButton";

请注意，主按钮的 links 包括基本按钮的链接。这样，<PrimaryButton> 的使用者就不需要知道它的依赖项（就像 JavaScript 导入一样）。

因为这些按钮不是路由，因此不与 URL 段相关联，所以 Remix 不知道何时预取、加载或卸载样式。我们需要将链接“浮现”到使用这些组件的路由中。

假设 app/routes/_index.tsx 使用主按钮组件

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import {
  PrimaryButton,
  links as primaryButtonLinks,
} from "~/components/primary-button";
import styles from "~/styles/index.css?url";

export const links: LinksFunction = () => [
  ...primaryButtonLinks(),
  { rel: "stylesheet", href: styles },
];

现在，Remix 可以预取、加载和卸载 button.css、primary-button.css 和路由的 index.css 的样式。

对此的最初反应是，路由必须比您希望的知道更多。请记住，每个组件都必须已经导入，因此它不会引入新的依赖项，而只是一些用于获取资产的样板代码。例如，考虑这样一个产品类别页面

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import { AddFavoriteButton } from "~/components/add-favorite-button";
import { ProductDetails } from "~/components/product-details";
import { ProductTile } from "~/components/product-tile";
import { TileGrid } from "~/components/tile-grid";
import styles from "~/styles/$category.css?url";

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

export default function Category() {
  const products = useLoaderData<typeof loader>();
  return (
    <TileGrid>
      {products.map((product) => (
        <ProductTile key={product.id}>
          <ProductDetails product={product} />
          <AddFavoriteButton id={product.id} />
        </ProductTile>
      ))}
    </TileGrid>
  );
}

组件导入已存在，我们只需要浮现资产

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import {
  AddFavoriteButton,
  links as addFavoriteLinks,
} from "~/components/add-favorite-button";
import {
  ProductDetails,
  links as productDetailsLinks,
} from "~/components/product-details";
import {
  ProductTile,
  links as productTileLinks,
} from "~/components/product-tile";
import {
  TileGrid,
  links as tileGridLinks,
} from "~/components/tile-grid";
import styles from "~/styles/$category.css?url";

export const links: LinksFunction = () => {
  return [
    ...tileGridLinks(),
    ...productTileLinks(),
    ...productDetailsLinks(),
    ...addFavoriteLinks(),
    { rel: "stylesheet", href: styles },
  ];
};

// ...

虽然这有点样板代码，但它启用了许多功能

您可以控制网络选项卡，并且 CSS 依赖项在代码中很清晰
与您的组件并置的样式
仅加载当前页面上使用的 CSS
当路由未使用您的组件时，其 CSS 将从页面中卸载
Remix 将使用 <Link prefetch> 预取下一页的 CSS
当一个组件的样式发生更改时，其他组件的浏览器和 CDN 缓存不会中断，因为它们都有自己的 URL。
当组件的 JavaScript 发生更改但其样式没有发生更改时，样式的缓存不会中断

资产预加载

由于这些只是 <link> 标记，因此您可以做的不仅仅是样式表链接，例如为元素的 SVG 图标背景添加资产预加载

[data-copy-to-clipboard] {
  background: url("/icons/clipboard.svg");
}

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import styles from "./styles.css?url";

export const links: LinksFunction = () => [
  {
    rel: "preload",
    href: "/icons/clipboard.svg",
    as: "image",
    type: "image/svg+xml",
  },
  { rel: "stylesheet", href: styles },
];

export const CopyToClipboard = React.forwardRef(
  ({ children, ...props }, ref) => {
    return (
      <Button {...props} ref={ref} data-copy-to-clipboard />
    );
  }
);
CopyToClipboard.displayName = "CopyToClipboard";

这不仅会使资产在网络选项卡中具有高优先级，而且当您使用 <Link prefetch> 链接到页面时，Remix 会将 preload 转换为 prefetch，因此 SVG 背景会与下一个路由的数据、模块、样式表和任何其他预加载并行预取。

链接媒体查询

使用纯样式表和 <link> 标记还可以减少用户浏览器在绘制屏幕时必须处理的 CSS 量。链接标记支持 media，因此您可以执行以下操作

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: mainStyles,
    },
    {
      rel: "stylesheet",
      href: largeStyles,
      media: "(min-width: 1024px)",
    },
    {
      rel: "stylesheet",
      href: xlStyles,
      media: "(min-width: 1280px)",
    },
    {
      rel: "stylesheet",
      href: darkStyles,
      media: "(prefers-color-scheme: dark)",
    },
  ];
};