使用变量

注意

需要在 StyleX Babel 配置中启用 unstable_moduleResolution 选项以启用主题化 API。

一旦定义了变量，就可以导入它们并使用 stylex.create 声明样式。

假设以下变量已在名为 tokens.stylex.js 的文件中定义

tokens.stylex.js

import * as stylex from '@stylexjs/stylex';

// A constant can be used to avoid repeating the media query
const DARK = '@media (prefers-color-scheme: dark)';

export const colors = stylex.defineVars({
  primaryText: {default: 'black', [DARK]: 'white'},
  secondaryText: {default: '#333', [DARK]: '#ccc'},
  accent: {default: 'blue', [DARK]: 'lightblue'},
  background: {default: 'white', [DARK]: 'black'},
  lineColor: {default: 'gray', [DARK]: 'lightgray'},
});

export const spacing = stylex.defineVars({
  none: '0px',
  xsmall: '4px',
  small: '8px',
  medium: '12px',
  large: '20px',
  xlarge: '32px',
  xxlarge: '48px',
  xxxlarge: '96px',
});

然后可以像这样导入和使用这些样式

components/MyComponent.js

import * as stylex from '@stylexjs/stylex';
import {colors, spacing} from '../tokens.stylex';

const styles = stylex.create({
  container: {
    color: colors.primaryText,
    backgroundColor: colors.background,
    padding: spacing.medium,
  },
});

使用变量时的规则

使用变量时，请记住以下几点规则

1. 必须使用命名导入来导入变量。
2. 必须直接从定义它们的 .stylex.js 文件中导入变量。

提示

请记住，StyleX 变量由 CSS 标识符组成。它们不能用作 JavaScript 代码中的值。