Vanilla Extract

此文档仅在使用经典 Remix 编译器时适用。如果您正在使用 Remix Vite，则可以使用 Vanilla Extract Vite 插件集成 Vanilla Extract。

Vanilla Extract 是一个零运行时的 CSS-in-TypeScript（或 JavaScript）库，它允许您使用 TypeScript 作为 CSS 预处理器。样式编写在单独的 *.css.ts（或 *.css.js）文件中，并且其中的所有代码都在构建过程中执行，而不是在用户的浏览器中执行。如果您想将 CSS 包的大小保持在最小限度，Vanilla Extract 还提供了一个名为 Sprinkles 的官方库，它可以让您定义一组自定义的实用程序类和一个类型安全的函数，以便在运行时访问它们。

要使用内置的 Vanilla Extract 支持，首先请确保您已在应用程序中设置了 CSS 打包。

然后，将 Vanilla Extract 的核心样式包作为开发依赖项安装。

npm install -D @vanilla-extract/css

然后，您可以通过 .css.ts/.css.js 文件名约定选择加入 Vanilla Extract。例如

import { style } from "@vanilla-extract/css";

export const root = style({
  border: "solid 1px",
  background: "white",
  color: "#454545",
});

import * as styles from "./styles.css"; // Note that `.ts` is omitted here

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