跳至主要内容

变量类型

注意

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

高级用例

声明变量类型是一种高级用例。对于大多数用例来说，这不是必需的。

默认情况下，变量值是字符串。对于大多数用例来说，这是正确的选择。但是，现代浏览器支持为 CSS 变量定义类型。可以使用指定变量 @property 规则来声明变量。

这样做可以启用一些在没有 CSS 的情况下不可能实现的有趣的用例。一些示例包括

  • 通过动画化角度或颜色变量来动画化渐变
  • 捕获元素上 1em 的值并在后代元素上使用它
  • 将浮点数转换为整数

API​

要在 StyleX 中为变量分配类型，可以使用各种函数，例如 stylex.types.color 或 stylex.types.length。

参考 API 文档 以获取可用函数的完整列表。

用法​

要为变量分配类型，可以使用相应的类型函数包装变量的值。

例如，考虑以下变量集

tokens.stylex.js
import * as stylex from '@stylexjs/stylex';

export const tokens = stylex.defineVars({
  primaryText: 'black',
  secondaryText: '#333',
  borderRadius: '4px',
  angle: '0deg',
  int: '2',
});

目前，所有值都可以是任意字符串。要为变量分配类型，可以使用相应的类型函数包装它们

tokens.stylex.js
import * as stylex from '@stylexjs/stylex';

export const tokens = stylex.defineVars({
  primaryText: stylex.types.color('black'),
  secondaryText: stylex.types.color('#333'),
  borderRadius: stylex.types.length('4px'),
  angle: stylex.types.angle('0deg'),
  int: stylex.types.integer(2),
});

条件值​

即使在值中使用 at 规则，用法也保持不变。以下是完全有效的

tokens.stylex.js
import * as stylex from '@stylexjs/stylex';

export const colors = stylex.defineVars({
  primaryText: stylex.types.color({default: 'black', [DARK]: 'white'}),
});

源代码中的类型安全​

stylex.types.* 函数的主要用途是通过在生成的 CSS 中声明变量类型来启用功能。但是，StyleX API 还可以增强您自己代码库中的类型安全。

当在 stylex.defineVars 中使用特定类型声明变量时，静态类型将强制在 stylex.createTheme 调用中对变量进行主题化时使用相同的类型函数。

theme.js
import * as stylex from '@stylexjs/stylex';
import {tokens} from './tokens.stylex.js';

export const highContrast = stylex.createTheme(tokens, {
  primaryText: stylex.types.color('black'),
  secondaryText: stylex.types.color('#222'),
  borderRadius: stylex.types.length('8px'),
  angle: stylex.types.angle('0deg'),
  int: stylex.types.integer(4),
});

由于变量的类型已在 stylex.defineVars 调用中声明，因此 stylex.createTheme 中的用法类型函数在功能上是无操作的，但静态类型需要它来确保类型安全。

示例用例​

模拟 round()​

现代浏览器开始支持 CSS 中的 round() 函数。但是，可以使用具有 integer 类型的变量来模拟此功能

const styles = stylex.create({
  gradient: {
    // Math.floor
    [tokens.int]: `calc(16 / 9)`

    // Math.round
    [tokens.int]: `calc((16 / 9) + 0.5)`
  },
})

由于 tokens.int 使用 integer 类型声明，因此在分配值时，任何小数值都会被丢弃，并且该值会被转换为整数类型。

动画化渐变​

通常无法动画化渐变。但是，通过使用类型化的 angle 变量，可以通过动画化其中使用的角度来动画化渐变。

无需动画化普通 CSS 属性，可以使用 stylex.keyframes 动画化 angle 变量

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

const rotate = stylex.keyframes({
  from: { [tokens.angle]: '0deg' },
  to: { [tokens.angle]: '360deg' },
});

const styles = stylex.create({
  gradient: {
    backgroundImage: `conic-gradient(from ${tokens.angle}, ...colors)`,
    animationName: rotate,
    animationDuration: '10s',
    animationTimingFunction: 'linear',
    animationIterationCount: 'infinite',
  },
})

这可用于创建旋转的圆锥形渐变