Fluent UI V2中Stack/Box等效组件及设计令牌访问最佳实践

1. 与Box/Stack对应的等效组件 #

Fluent UI V2 官方提供了同名的 Stack 和 Box 组件，直接替代其他UI库的同类组件：

• Stack：用于一维布局（横向/纵向），支持gap、align、justify等核心布局属性，完全覆盖其他库Stack组件的功能，还能直接对接设计令牌。
• Box：作为通用容器组件，支持所有CSS样式属性，同时可以便捷地访问设计令牌，适合做基础布局容器或样式封装。

使用示例：

import { Stack, Box } from '@fluentui/react-components';

// Stack 纵向布局，间距用令牌
<Stack gap="medium" verticalAlign="center">
  <Box padding="small">内容1</Box>
  <Box padding="small">内容2</Box>
</Stack>

2. 访问间距等设计令牌（无需自行实现） #

V2 内置了完整的设计令牌系统，不需要自己实现类似MUI theme.spacing(2)的逻辑，有两种常用方式：

• 直接在组件props中使用令牌别名：官方组件的样式属性（如padding、gap）支持直接传入令牌名称（如"small"、"medium"），组件会自动映射到对应的像素值。
• 通过useTheme Hook获取令牌对象：如果需要在自定义样式中使用，用useTheme拿到主题实例后，直接访问theme.tokens.spacing下的阶梯值：

import { useTheme, makeStyles } from '@fluentui/react-components';

const useStyles = makeStyles({
  customContainer: {
    padding: theme => theme.tokens.spacing.large,
    marginBottom: theme => theme.tokens.spacing.medium,
  },
});

function MyComponent() {
  const styles = useStyles();
  const theme = useTheme();
  // 也可以直接获取令牌值
  const spacingXl = theme.tokens.spacing.xl;

  return <div className={styles.customContainer}>自定义布局</div>;
}

间距阶梯包含xs、small、medium、large、xl等预设值，完全匹配Fluent设计语言规范。

3. V1的getTheme/DefaultEffects方法在V2中不再适用 #

Fluent UI V2 重构了主题系统，V1的getTheme、DefaultEffects等API已被完全废弃，不能在V2项目中使用。V2采用基于ThemeProvider和useTheme的新体系，所有令牌和主题配置都通过这套新API获取。

最佳实践 #

• 优先使用官方Stack/Box组件：它们已经内置了对设计令牌的支持，避免重复造轮子，保证UI一致性。
• 尽量用组件props的令牌别名：比如padding="medium"比手动写padding: 16px更易维护，且能跟随主题变化。
• 全局定制令牌用createTheme：如果需要修改默认间距或其他令牌，通过createTheme创建自定义主题，再传给根组件的ThemeProvider：

import { createTheme, ThemeProvider } from '@fluentui/react-components';

const customTheme = createTheme({
  tokens: {
    spacing: {
      medium: '20px', // 覆盖默认medium间距
    },
  },
});

// 根组件包裹
function App() {
  return <ThemeProvider theme={customTheme}>...</ThemeProvider>;
}

• 避免V1/V2 API混用：两者的主题和组件体系完全独立，混用会导致样式冲突和难以排查的问题。

内容的提问来源于stack exchange，提问作者Bubulux