跳至主要内容

stylex.types.*

一组辅助函数，用于在 stylex.defineVars 和 stylex.createTheme 中定义变量的 CSS 类型。

这些函数会为变量生成带有适当 syntax 值的 @property CSS 规则。

示例用法：​

types.* 函数与 stylex.defineVars 和 stylex.createTheme 已支持的所有模式兼容。

例如，考虑以下变量集

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

export const colors = stylex.defineVars({
  accent: {
    default: 'blue',
    '@media (prefers-color-scheme: dark)': 'lightblue',
  },
  sm: '4px',
});

您可以像这样为这两个变量指定类型

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

export const colors = stylex.defineVars({
  accent: stylex.types.color({
    default: 'blue',
    '@media (prefers-color-scheme: dark)': 'lightblue',
  }),
  sm: stylex.types.length('4px'),
});

可用类型​

以下类型可用

stylex.types.angle​

为生成的 CSS 变量生成一个 @property 规则，并使用 <angle> 语法。

stylex.types.color​

为生成的 CSS 变量生成一个 @property 规则，并使用 <color> 语法。

stylex.types.url​

为生成的 CSS 变量生成一个 @property 规则，并使用 <url> 语法。

stylex.types.image​

为生成的 CSS 变量生成一个 @property 规则，并使用 <image> 语法。

stylex.types.integer​

为生成的 CSS 变量生成一个 @property 规则，并使用 <integer> 语法。

stylex.types.lengthPercentage​

为生成的 CSS 变量生成一个 @property 规则，并使用 <length-percentage> 语法。

stylex.types.length​

为生成的 CSS 变量生成一个 @property 规则，并使用 <length> 语法。

stylex.types.percentage​

为生成的 CSS 变量生成一个 @property 规则，并使用 <percentage> 语法。

stylex.types.number​

为生成的 CSS 变量生成一个 @property 规则，并使用 <number> 语法。

stylex.types.resolution​

为生成的 CSS 变量生成一个 @property 规则，并使用 <resolution> 语法。

stylex.types.time​

为生成的 CSS 变量生成一个 @property 规则，并使用 <time> 语法。

stylex.types.transformFunction​

为生成的 CSS 变量生成一个 @property 规则，并使用 <transform-function> 语法。

stylex.types.transformList​

为生成的 CSS 变量生成一个 @property 规则，并使用 <transform-list> 语法。