Vanilla Extract

このコンテンツはまだ日本語訳がありません。

Vanilla Extract

本文档仅在使用 Classic Remix Compiler 时才相关。如果您使用 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 bundlel。

然后，安装 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";