css.defineVars

如何在样式和主题中使用定义变量。

警告

变量必须在扩展名为 *.stylex.js（或 *.stylex.ts）的文件中定义为命名导出。 目前，由于对 Web 上样式编译方式的限制，因此存在此限制。

概述

此 API 创建样式变量，这些变量可以在代码库中任何位置的 css.create() 和 css.createTheme() 调用中导入和使用。 还支持在字符串值中使用多个变量。

vars.stylex.js

import { css } from 'react-strict-dom';

export const colors = css.defineVars({
  accent: 'blue',
  background: 'white',
  line: 'gray',
  textPrimary: 'black',
  textSecondary: '#333',
});

API

命名变量

defineVars 函数接受命名变量的对象。 这些变量可以通过其键名在其他地方引用。 变量的值必须是有效的样式值（即，数字、字符串、对象值或 null。）

vars.stylex.js

export const colors = css.defineVars({
  textPrimary: 'black',
  textSecondary: '#333',
});

component.js

import { colors } from './vars.stylex.js';

const styles = css.create({
  text: {
    color: colors.textPrimary
  },
});