Fluent UI V2 中的 Stack / Box 等效项是什么以及访问设计令牌的最佳实践

Question

问题：

在其他 UI 库中，我习惯于拥有某种

Box

和/或

Stack

组件，为底层令牌系统提供 API。

在 Fluents V2 文档的“设计语言”下，他们专门声明了颜色、阴影、间距、材质、运动等的各种标记抽象。例如spacing：如何访问定义的间距坡道？例如，在 MUI 中，您可以执行以下操作：

theme.spacing(2); // `${8 * 2}px` = '16px'

或者我应该自己实现这个？我想了解这里的最佳实践:(

目前我所知道的：

这篇post至少解决了堆栈问题，我知道V1具有布局等的所有实用抽象。但我在官方V2文档和react故事书中找不到任何提示。

我遇到了V1-docs的这一部分，他们所做的正是我正在寻找的：

// via react package
import { getTheme } from '@fluentui/react';

const theme = getTheme();

<div style={{ boxShadow: theme.effects.elevation8 }}>

//via theme package
import { DefaultEffects } from '@fluentui/react';

<div style={{ boxShadow: DefaultEffects.elevation8 }} />;

即使对于 V2，我也应该使用此方法吗？

任何帮助将不胜感激，我们刚刚开始使用 FluentUI，我对其生态系统一无所知。

Answer 1

我喜欢我得到了两票否决票，并且没有评论解释为什么这是一个如此糟糕的问题。

无论如何，对于那些想知道这一点的人：

不要使用“@ Fluentui / React”包，“@ Fluentui / React-Components”内部有一个简单的令牌对象。我仍然无法在文档中找到这一点，但其中一位维护者在这篇post

中向我展示了这一点

总长：

import { tokens } from '@fluentui/react-components';

关于 Stack / Box -> 在 v9 中被删除，作为遗留 shim 存在