# @dessert-box/react 中文文档

规范地址：https://npmcn.com/package/%40dessert-box/react/

版本：0\.7\.5
npm 元数据更新时间：2023-05-14T15:53:45.457Z
中文译文更新时间：2026-11-12T01:29:37.852Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dessert-box/react
原文对照：https://npmcn.com/package/%40dessert-box/react/?lang=original
项目主页：https://github.com/TheMightyPenguin/dessert-box#readme
源码仓库：https://github.com/TheMightyPenguin/dessert-box

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：22.1 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@vanilla-extract/css \>=1\.11\.0，react \>=16\.8\.0
- 首次发布：2021-09-19T22:52:54.585Z
- 最新版本发布：2023-05-14T15:53:45.347Z
- 近 30 天下载量：64821（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 0 个）

## 中文简介

一个库,可以轻松地从 React 组件中消耗出您的设计符号,意在使用 \[vanilla-extract\]\[vanilla-extract\].

## 安装

```sh
npm install @dessert-box/react
```

也可以使用：`pnpm add @dessert-box/react`、`yarn add @dessert-box/react`、`bun add @dessert-box/react`

## README

# 甜点盒

从 React 组件轻松消耗您设计符号的库, 用于 [香草摘录](https://github.com/seek-oss/vanilla-extract)。 。 。 .

这个图书馆会消耗你的 [喷洒](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles) 从一个反应组件 微风。 它提供零CSS运行时间 `<Box />` 组件(类似于 [布罗德](https://seek-oss.github.io/braid-design-system/components/Box) 或者说 [查克罗](https://chakra-ui.com/docs/layout/box)) (中文(简体) ).

[试试密码箱!](https://codesandbox.io/s/dessert-box-demo-wxgy8?file=/src/App.tsx)

它通过消费发挥作用 `atoms` 创建于 [`vanilla-extract`](https://github.com/seek-oss/vanilla-extract)和 [`sprinkles`](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles)向"求求"的团队大喊大叫 制作这些很棒的图书馆!

1.  第一步,用您的 `atoms` 用喷出物创建 :

```tsx
// Box.tsx
import { createBox } from '@dessert-box/react';
import { atoms } from './sprinkles.css';

const { Box } = createBox({
  atoms,
  // optional: pass your CSS reset className here
  // useful if you want to scope your reset to your Box element
  defaultClassName: 'resetClassName',
});

export default Box;
```

2.  步骤2,导入它享受甜蜜:

```tsx
// OtherFileOrComponent.tsx
import Box from './Box';

const MyComponent = () => {
  return <Box padding="large">What a sweet treat!</Box>;
};
```

**想知道为什么使用Box组件可能是一个好主意吗? 或者Box组件是什么? 检查 [财务问题](https://npmcn.com/package/%40dessert-box/react/#readme-FAQ)。 。 。 .**

> 想知道如何使用 `variants` 这个图书馆? 看看这个 [变体](https://npmcn.com/package/%40dessert-box/react/#readme-variants) 节.

![dessert-box](https://img.shields.io/bundlephobia/minzip/dessert-box.svg)

-   [甜点盒](https://npmcn.com/package/%40dessert-box/react/#readme--dessert-box)
    -   [使用量](https://npmcn.com/package/%40dessert-box/react/#readme-usage)
        -   [备选案文](https://npmcn.com/package/%40dessert-box/react/#readme-variants)
    -   [API 密码](https://npmcn.com/package/%40dessert-box/react/#readme-api)
        -   [创建框( 选项 : {原子: 原子Fn, 默认分类Name: string })](https://npmcn.com/package/%40dessert-box/react/#readme-createboxoptions--atoms-atomsfn-defaultclassname-string-)
        -   [创建 BoxWith Atoms Prop( 选项 : {原子: AtomsFn, 默认类Name: string })](https://npmcn.com/package/%40dessert-box/react/#readme-createboxwithatomspropoptions--atoms-atomsfn-defaultclassname-string-)
    -   [运行示例应用程序](https://npmcn.com/package/%40dessert-box/react/#readme-running-the-example-app)
    -   [怎么会这样?](https://npmcn.com/package/%40dessert-box/react/#readme-how-does-it-work)
    -   [谢谢](https://npmcn.com/package/%40dessert-box/react/#readme-thanks)
    -   [财务问题](https://npmcn.com/package/%40dessert-box/react/#readme-faq)

[试试密码箱!](https://codesandbox.io/s/dessert-box-demo-wxgy8?file=/src/App.tsx)

## 使用量

安装软件包 :

```
$ npm install @dessert-box/react
```

配置 [香草摘录](https://github.com/seek-oss/vanilla-extract) 财务报告和审定财务报表 [`sprinkles`](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles) 并准备好你的原子:

```js
// atoms.css.ts
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';

const space = {
  none: 0,
  small: 4,
  medium: 8,
  large: 16,
};

const colors = {
  primary: 'blue',
  // ...
};

const atomicStyles = defineProperties({
  conditions: {
    mobile: {},
    tablet: { '@media': 'screen and (min-width: 768px)' },
    desktop: { '@media': 'screen and (min-width: 1024px)' },
  },
  properties: {
    padding: space,
    backgroundColor: colors,
    // ...
  },
  // ...
});

export const atoms = createSprinkles(atomicStyles);
```

> 检查 `sprinkles` [文档](https://github.com/seek-oss/vanilla-extract/tree/3360bdfc9220024e7ffa49b3b198b72743d4e264/packages/sprinkles#setup) 用于创建这些原子.

现在让我们创造我们 `<Box />` 使用这些原子:

```tsx
// Box.ts
import { createBox } from '@dessert-box/react';
import { atoms } from './sprinkles.css';

const { Box } = createBox({ atoms });

export default Box;
```

```tsx
// otherFile.tsx
import Box from './Box';

const App = () => {
  return <Box padding="large">Hello</Box>;
};
```

注意,我们可以通过每一个财产, 简称,或者条件 我们通常可以通过我们 `atomsFn` 函数。 例如,我们可以利用这些条件来设计应对能力:

```jsx
<Box padding={{ mobile: 'none', tablet: 'small', desktop: 'large' }} />
```

如果需要使标记与标记不同 `div`,可以使用 `as` 道具 :

```jsx
<Box as="a" href="https://example.com" padding="small">
  Link to example
</Box>
```

[试试密码箱!](https://codesandbox.io/s/dessert-box-demo-wxgy8?file=/src/App.tsx)

### 备选案文

官员 [@vanilla-extract/recipes (英语)](https://github.com/seek-oss/vanilla-extract#recipes-api) 软件包有处理变体的优秀API,这可以和我们的 `Box` 要创建的组件 [基于变体的组件](https://ped.ro/blog/variant-driven-components)数字 :

注: (假设您已经创建了自己的 `Box` (按以上例子排列).

1.  首先用 `recipe` 函数 :

```tsx
// Button.css.ts
import { recipe } from '@vanilla-extract/recipes';
import { atoms } from '../atoms.css';

export const buttonRecipe = recipe({
  variants: {
    kind: {
      primary: atoms({ background: 'blue50' }),
      secondary: atoms({ background: 'yellow' }),
    },
    size: {
      md: atoms({ fontSize: 'large' }),
      lg: atoms({ fontSize: 'extraLarge' }),
    },
  },
});

export type ButtonVariants = Parameters<typeof buttonRecipe>[0];
```

2.  那就用那个 `recipes` 函数创建变量并将其应用到您的 `Box`数字 :

```tsx
// Button.tsx
import { Box } from './Box';
import { buttonRecipe, ButtonVariants } from './Button.css';

type Props = {
  children: React.ReactNode;
} & ButtonVariants;

export const Button = ({
  children,
  size = 'md',
  kind = 'secondary',
}: Props) => {
  return (
    <Box as="button" className={buttonRecipe({ size, kind })}>
      {children}
    </Box>
  );
};

export default Button;
```

关于更多背景,参见: [@vanilla-extract/recipe (英语)](https://github.com/seek-oss/vanilla-extract#recipes-api) 或者觉得自由 [在该项目中打开一个问题](https://github.com/TheMightyPenguin/dessert-box/issues/new) 如果融合没有你预期的那样有效!

## API 密码

### 创建框( 选项 : {原子: 原子Fn, 默认分类Name: string })

创建一个 `<Box />` 在根位取出原子的组件.

```jsx
import { createBox } from '@dessert-box/react';
import { atoms } from './atoms.css';

const Box = createBox({ atoms });

<Box padding="small" />;
```

### 创建 BoxWith Atoms Prop( 选项 : {原子: AtomsFn, 默认类Name: string })

创建一个 `<Box />` 将原子作为道具的组件 `atoms`。 。 。 .

```jsx
import { createBoxWithAtomsProp } from '@dessert-box/react';
import { atoms } from './atoms.css';

const Box = createBoxWithAtomsProp({ atoms });

<Box atoms={{ padding: 'small' }} />;
```

## 运行示例应用程序

运行 `npm install` 接下来 `npm run build` 在根文件夹中(有此 README 文件的) .

然后移动到示例文件夹中 `cd example` 运行 `npm install` 财务报告和审定财务报表 `npm start`。 。 。 .

## 怎么会这样?

这个工程依赖于构建时生成的 CSS [喷洒](https://github.com/seek-oss/vanilla-extract/tree/3360bdfc9220024e7ffa49b3b198b72743d4e264/packages/sprinkles),然后使用 `atomsFn` 在运行时间中查找类名。 所以它确实有一个运行时间的足迹, 但应该非常小。 我仍然在尝试看是否有可能去除它, 但其他的方法可能导致其他的限制或类似的运行时间.

## 谢谢

-   多亏了Speaking的团队 [香草摘录](https://github.com/seek-oss/vanilla-extract) 财务报告和审定财务报表 [`sprinkles`](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles)没有这些伟大的自由 和技术成就,这是不可能实现的.

## 财务问题

-   Box 组件是什么?

> 这是一种通用的元素,可以让你快速地原型并取取出各种造型道具(考虑将许多CSS属性暴露在一个组件上作为道具).

-   我为什么要用Box组件?

> Box 组件有很多版本和口味,有些更多 [灵活](https://chakra-ui.com/docs/layout/box),而其他人则更多 [限制性](https://seek-oss.github.io/braid-design-system/components/Box)。这个库中的"盒子"属于后一类(限制性),它更适合成为您设计系统的下级API(或作为它的灵感).

这个Box组件是用来作为消费设计符号的原始,在灵活性和约束之间给予你一个很好的平衡. 您可以使用它作为较低等的 API 执行您的其他组件(按钮,卡,布局组件,.),也可以作为原型和一般用法组件:

-   作为一个原型化工具,它允许您使用所有的设计符来生成新的设计并评估您是否需要在您的地基上进行拓扑,或者验证它们是否为您的使用案例工作.
-   对于一般的用法,你仍然可以保证你的系统的用户不会做任何不可能的事(例如:使用一个不是设计符号的一部分的值),但仍有在UI上工作的生产性经验.

## 常见问题

### @dessert-box/react 是什么？

一个库,可以轻松地从 React 组件中消耗出您的设计符号,意在使用 \[vanilla-extract\]\[vanilla-extract\]\.

### 如何安装 @dessert-box/react？

在项目目录运行 npm install @dessert-box/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@vanilla-extract/css（\>=1\.11\.0）、react（\>=16\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dessert-box/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dessert-box/react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dessert-box/react 可以商用吗？

@dessert-box/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dessert-box/react 的下载量有多少？

根据 npm 官方下载统计，@dessert-box/react 在 2026/10/12 – 2026/11/10 这 30 天内被下载 64,821 次，日均约 2,161 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dessert-box/react 还在维护吗？

最新版本 0\.7\.5 发布于 2023/05/14（3 年前）；至今共发布 12 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/09/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。