尧图网页设计 
StyleX 速查指南从编译器配置、样式定义到主题系统与类型安全的完整实践【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/referenceStyleX 是 Facebook 开源的一款 CSS-in-JS 用户界面样式系统本指南基于本项目中的 StyleX 备忘清单位于本仓库 CSS 分类下与 React、CSS 3、Tailwind CSS 等文档并列展开。读完本文你将掌握 StyleX 从安装、各类构建工具Rollup / Babel / Webpack / Next.js的编译器配置到stylex.create()定义样式、stylex.props()应用样式、defineVars()/createTheme()搭建主题系统以及 StyleXStyles 等 TypeScript 类型的完整实战方案。入门 StyleX什么是 StyleXStyleX 是一个 CSS-in-JS 的用户界面样式系统样式用 JavaScript/TypeScript 对象语法编写但在编译期被提取为静态的原子化 CSS而不是像传统 CSS-in-JS 那样在运行时动态注入样式。这样的设计让它在运行时几乎零开销同时保留了样式与组件共处一文件的局部性开发体验。生态与配套工具围绕 StyleX 官方编译器社区与官方还提供了大量配套工具按用途归类如下VSCode 插件StyleX Intellisense提供样式属性的智能提示与校验。Vite 集成vite-plugin-stylexvite-plugin-stylex-devBabel 插件tailwind-to-stylex支持在 Tailwind CSS 项目中复用现有工具类写法。stylex-extend/babel-plugin支持使用 JSX 属性直接定义 StyleX 样式。Prettier 插件prettier-plugin-stylex-key-sort自动整理stylex.create对象中样式键的顺序。Bun 集成bun-plugin-stylex。入门模板Next.jsApp Router模板支持 StyleX 的 Next.js 项目骨架。Qwik 模板结合 StyleX 与 tailwind-to-stylex 的 Qwik 项目。Docusaurus 3 模板支持 StyleX 的 Docusaurus 3 项目。SvelteKit 模板支持 StyleX 的 SvelteKit 项目。这些模板覆盖了当前主流的前端框架可以直接作为新项目的起点省去手动串联编译器的步骤。安装与编译器配置StyleX 的核心理念是编译期提取 CSS因此除了安装运行时包外还必须为你的构建工具接入对应的编译器插件。下面按构建工具逐一说明。StyleX 运行时包npm install --save stylexjs/stylex运行时包提供stylex.create、stylex.props、stylex.keyframes、stylex.defineVars、stylex.createTheme等核心 API。编译器生产Rollupnpm install --save-dev stylexjs/rollup-plugin修改rollup.config.js注意必须在 Babel 之前使用 stylex 插件import stylexPlugin from stylexjs/rollup-plugin; const config { input: ./index.js, output: { file: ./.build/bundle.js, format: es, }, // 确保在 Babel 之前使用 stylex 插件 plugins: [stylexPlugin({ // 必需项。生成的 CSS 文件的文件路径。 fileName: ./.build/stylex.css, // 默认值false dev: false, // 所有生成的类名的前缀 classNamePrefix: x, // CSS 变量支持所必需 unstable_moduleResolution: { // 类型commonJS | haste // 默认值commonJS type: commonJS, // 项目根目录的绝对路径 rootDir: __dirname, }, })], }; export default config;在配置的简化写法中也可以直接用插件工厂返回 plugins 数组import plg from stylexjs/rollup-plugin; const config () ({ plugins: [ plg({ ...options }) ] }) export default config;关键参数说明fileName必填指定编译产物 CSS 的输出路径例如./.build/stylex.css。dev开发模式开关默认false开发时设为true可以输出更易调试的类名与未压缩 CSS。classNamePrefix所有生成的类名的统一前缀默认x。unstable_moduleResolutionCSS 变量主题系统支持所必需。type支持commonJS默认与haste两种解析策略rootDir填写项目根目录的绝对路径。编译器开发Babelnpm install --save-dev stylexjs/babel-plugin修改babel.config.jsimport styleX from stylexjs/babel-plugin; const config { plugins: [ [styleX, { dev: true, // 设置为 true 以进行快照测试 // 默认值false test: false, // CSS 变量支持所必需 unstable_moduleResolution: { // 类型commonJS | haste // 默认值commonJS type: commonJS, // 项目根目录的绝对路径 rootDir: __dirname, } }], ], }; export default config;test选项在快照测试场景下设为true可以让编译输出保持确定性dev在开发环境设为true。编译器生产Webpacknpm install --save-dev stylexjs/webpack-plugin修改webpack.config.js同样确保在 Babel 之前使用 stylex 插件const StylexPlugin require(stylexjs/webpack-plugin); const path require(path); const config (env, argv) ({ entry: { main: ./src/index.js, }, output: { path: path.resolve(__dirname, .build), filename: [name].js, }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: babel-loader, }, ], }, plugins: [ // 确保在 Babel 之前使用 stylex 插件 new StylexPlugin({ filename: styles.[contenthash].css, // 获取 webpack 的模式并为开发设置值 dev: argv.mode development, // 使用静态生成的 CSS 文件而不是运行时注入的 CSS。 // 即使在开发环境中也是如此。 runtimeInjection: false, // 可选的。默认值x classNamePrefix: x, // CSS 变量支持所必需 unstable_moduleResolution: { // 类型commonJS | haste // 默认值commonJS type: commonJS, // 项目根目录的绝对路径 rootDir: __dirname, }, }), ], cache: true, }); module.exports config;Webpack 版的额外要点filename支持[contenthash]占位符便于长期缓存例如styles.[contenthash].css。dev可以直接读取argv.mode自动联动开发/生产。runtimeInjection: false表示使用静态生成的 CSS 文件而不是运行时注入的 CSS即便在开发环境也保持一致行为避免生产与开发出现样式差异。编译器生产Next.jsnpm install --save-dev stylexjs/nextjs-plugin \ stylexjs/babel-plugin rimraf在package.json中添加清理脚本确保每次启动或构建前清空.next缓存{ scripts: { ..., predev: rimraf .next, prebuild: rimraf .next } }修改 Babel 配置.babelrc.jsmodule.exports { presets: [next/babel], plugins: [ [ stylexjs/babel-plugin, { dev: process.env.NODE_ENV development, test: process.env.NODE_ENV test, runtimeInjection: false, genConditionalClasses: true, treeshakeCompensation: true, unstable_moduleResolution: { type: commonJS, rootDir: __dirname, }, }, ], ], };这里的genConditionalClasses为条件样式生成独立的类便于按需启用与treeshakeCompensation补偿 Tree-shaking 带来的副作用是 Next.js 场景下推荐的官方配置项配合presets: [next/babel]使用。修改 Next.js 配置next.config.mjs/** type {import(next).NextConfig} */ import stylexPlugin from stylexjs/nextjs-plugin; const nextConfig {}; const __dirname new URL(., import.meta.url).pathname; export default stylexPlugin({ rootDir: __dirname, })(nextConfig);仅限本地开发无需构建配置如果想在搭建完整构建流水线之前先体验 StyleX可以安装本地开发运行时npm install --save-dev stylexjs/dev-runtime开发运行时必须导入到应用程序的 JavaScript 入口点并进行配置import inject from stylexjs/dev-runtime; inject({ classNamePrefix: x, dev: true, test: false, });这种方式把样式编译与注入放在运行时完成适合原型验证正式项目仍应切换到生产编译器以获得静态 CSS 与最小运行时开销。用 ESLint 捕捉错误StyleX 编译器本身不会验证你的样式而且会编译许多无效样式。因此创作样式时应当使用 ESLint 插件来提前捕获这些错误npm install --save-dev stylexjs/eslint-plugin修改 ESLint 配置.eslintrc.jsmodule.exports { plugins: [stylexjs], rules: { stylexjs/valid-styles: error, }, };启用valid-styles规则后例如拼错的属性名、非法的值等无效样式会在 lint 阶段直接报错从而与编译器不校验的宽松行为互补。定义样式创建样式样式使用对象语法和create()API 定义import * as stylex from stylexjs/stylex; const styles stylex.create({ root: { width: 100%, maxWidth: 800, minHeight: 40, }, });再例如一个带基础排版与高亮变体的示例import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { fontSize: 16, lineHeight: 1.5, color: rgb(60,60,60), }, highlighted: { color: rebeccapurple, }, });伪类先定义基础样式import * as stylex from stylexjs/stylex; const styles stylex.create({ button: { backgroundColor: lightblue, }, });为名为button的样式在背景上添加:hover和:active伪类——只需把属性值改为一个默认值 条件键的对象import * as stylex from stylexjs/stylex; const styles stylex.create({ button: { backgroundColor: { default: lightblue, :hover: blue, :active: darkblue, }, }, });这是 StyleX 的核心心智模型属性值可以是一个条件表default为兜底值其余键为伪类、媒体查询等条件选择器。伪元素伪元素如::placeholder可以直接作为样式键import * as stylex from stylexjs/stylex; const styles stylex.create({ input: { // 伪元素 ::placeholder: { color: #999, }, color: { default: #333, // 伪类 :invalid: red, }, }, });这里同时展示了伪元素::placeholder整体作为嵌套对象与伪类:invalid作为条件表键两种写法。媒体查询和其他 规则媒体查询同样可以作为属性值中的条件import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { width: { default: 800, media (max-width: 800px): 100%, media (min-width: 1540px): 1366, }, }, });同理其他规则如supports、container也可以按此模式作为条件使用。组合条件当需要组合媒体查询和伪选择器时需要嵌套超过一层import * as stylex from stylexjs/stylex; const styles stylex.create({ button: { color: { default: var(--blue-link), :hover: { default: null, media (hover: hover): scale(1.1), }, :active: scale(0.9), }, }, });:hover下的值再次是一个条件表default为null不生效仅在支持悬停的媒体环境下应用scale(1.1)。注意这里的scale用于color只是文档示例实际生产代码中请把变换类属性与颜色区分开。后备样式传统 CSS 中可以通过重复声明同一属性实现后备值浏览器取最后一个支持的声明.header { position: fixed; position: -webkit-sticky; position: sticky; }StyleX 用firstThatWorks函数实现相同目的——编译器会按顺序生成后备声明浏览器依次尝试直到找到可识别的值import * as stylex from stylexjs/stylex; const styles stylex.create({ header: { position: stylex.firstThatWorks(sticky, -webkit-sticky, fixed), }, });关键帧动画使用stylex.keyframes()函数定义关键帧动画然后在样式中通过animationName引用import * as stylex from stylexjs/stylex; const fadeIn stylex.keyframes({ from: {opacity: 0}, to: {opacity: 1}, }); const styles stylex.create({ base: { animationName: fadeIn, animationDuration: 1s, }, });keyframes()会为动画名生成稳定的标识符并随编译产物一起输出到 CSS 文件中。动态样式当某个样式值只能在运行时确定时可以使用函数样式import * as stylex from stylexjs/stylex; const styles stylex.create({ // 函数参数必须是简单标识符 // -- 不允许解构或默认值 bar: (height) ({ height, // 函数体必须是对象字面量 // -- 不允许使用 { return {} } }), }); function MyComponent() { // height 的值在编译时不能确定。 const [height, setHeight] useState(10); return div {...stylex.props(styles.bar(height))} /; }使用动态样式有两条硬性语法约束函数参数必须是简单标识符不允许解构或默认值例如({ height }) 或(height 10) 都是非法的。函数体必须是对象字面量不允许{ return {} }这种语句块形式。注意动态样式是一项高级功能应谨慎使用。对于大多数用例条件样式isActive styles.active应该已经足够只有真正的运行时动态值才需要函数样式。使用样式合并样式stylex.props()接收任意数量的样式对象并合并为一个包含className与style的对象展开到元素上即可import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { fontSize: 16, lineHeight: 1.5, color: grey, }, highlighted: { color: rebeccapurple, }, }); div {...stylex.props( styles.base, styles.highlighted )} /;合并顺序决定样式优先级后传入的样式在冲突属性上覆盖先传入的。上例中highlighted在后文字为紫色如果顺序颠倒文字将变回灰色div {...stylex.props( styles.highlighted, styles.base )} /条件样式通过常见的 JavaScript 模式三元表达式和运算符可以在运行时有条件地应用样式。stylex.props会忽略虚假值如null、undefined或falsediv {...stylex.props( styles.base, props.isHighlighted styles.highlighted, isActive ? styles.active : styles.inactive, )} /这是日常开发中使用频率最高的能力既有满足条件才应用也有二选一的变体选择。样式变体先把各个变体定义为独立样式import * as stylex from stylexjs/stylex; const styles stylex.create({ violet: { backgroundColor: { default: blueviolet, :hover: darkviolet, }, color: white, }, gray: { backgroundColor: { default: gainsboro, :hover: lightgray, }, }, // ... more variants here ... });然后通过把variant属性作为样式对象的键用索引方式应用对应变体function Button({variant, ...props}) { return ( button {...props} {...stylex.props(styles[variant])} / ); }styles[variant]的索引访问天然适配变体名即样式键的设计非常适合实现 Button、Badge 这类多形态组件。样式作为 PropsStyleX 样式对象可以作为styleprop 直接传给自定义组件CustomComponent style{styles.base} /注意不要这样用stylex.props()返回的是带有className和style的普通对象如果把它当作样式值传入会导致组件拿到错误结构// ❌ 不要这样使用! ⚠️ CustomComponent style{stylex.props(styles.base)} /正确做法是把原始样式对象可以是数组同样支持条件项作为style传入由接收方自行用stylex.props合并CustomComponent style{[ styles.base, isHighlighted styles.highlighted ]} /接受组件中的样式自定义组件内部通过stylex.props将外部传入的style与本地样式合并应用import * as stylex from stylexjs/stylex; // Local Styles const styles stylex.create({ base: { /*...*/ }, }); function CustomComponent({style}) { return ( div {...stylex.props(styles.base, style)} / ); }style放在后面意味着外部传入的样式可以覆盖本地base中的同名属性实现了可被调用方定制的组件接口。取消设置样式将样式属性设置为null会删除 StyleX 之前为该属性应用的任何样式import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { color: null, }, });这常与条件表配合当default为null时除非命中某个条件分支否则该属性不输出从而避免继承父级的同名样式。主题系统StyleX 的主题系统建立在 CSS 变量之上defineVars()声明变量组createTheme()为同一变量组产出多套主题通过stylex.props应用到元素后变量作用于该元素及其所有后代。使用媒体查询定义主题变量可以利用常量避免重复书写媒体查询import * as stylex from stylexjs/stylex; // 可以使用常量来避免重复媒体查询 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}, });定义变量import * as stylex from stylexjs/stylex; export const tokens stylex.defineVars({ primaryText: black, secondaryText: #333, borderRadius: 4px, fontFamily: system-ui, sans-serif, fontSize: 16px, });这会在 HTML 文档的:root处定义 CSS 变量。变量可以作为常量导入并在stylex.create调用中使用。使用变量把颜色与间距两组变量分别定义import * as stylex from stylexjs/stylex; // 可以使用常量来避免重复媒体查询 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, });然后像普通常量一样导入并引用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, }, });定义变量时的规则变量必须定义在.stylex.js文件中文件扩展名必须为以下之一.stylex.js.stylex.mjs.stylex.cjs.stylex.ts.stylex.tsx.stylex.jsx变量必须命名导出不能是 default 导出、不能间接导出、不能嵌套在其他对象内部// ✅ - 命名导出 export const colors stylex.defineVars({ /* ... */ }); const sizeVars { ... }; // ✅ - 另一个命名导出 export const sizes stylex.defineVars(sizeVars);以下写法均不允许// ❌ - 只允许命名导出 export default stylex.defineVars({ /* ... */ }); // ❌ - 变量必须直接导出 const x stylex.defineVars({ /* ... */ }); export const colors x; // ❌ - 变量不能嵌套在另一个对象内部 export const colors { foregrounds: stylex.defineVars({ /* ... */ }), backgrounds: stylex.defineVars({ /* ... */ }), };这些约束的存在是为了让编译器在静态分析阶段能够确定每个变量的归属变量组从而正确生成 CSS 变量引用与主题覆盖规则。创建主题import * as stylex from stylexjs/stylex; import {colors, spacing} from ./tokens.stylex; // 可以使用常量来避免重复媒体查询 const DARK media (prefers-color-scheme: dark); // Dracula 主题 export const dracula stylex.createTheme(colors, { primaryText: {default: purple, [DARK]: lightpurple}, secondaryText: {default: pink, [DARK]: hotpink}, accent: red, background: {default: #555, [DARK]: black}, lineColor: red, });应用主题主题对象与stylex.create()创建的样式对象类似用stylex.props()将它应用到元素上即可覆盖该元素及其所有后代的变量div {...stylex.props(dracula, styles.container)} {children} /div;关于主题有三条重要规则创建主题时必须覆盖变量组中的所有变量——这一选择是为了帮助开发者发现意外遗漏。主题可以在代码库中的任何位置通过stylex.createTheme()创建并在文件或组件之间自由传递。如果同一变量组的多个主题应用于同一个 HTML 元素则最后应用的主题获胜。变量类型所有变量值都可以是任意字符串若要为变量声明类型可用对应的类型函数包裹import * as stylex from stylexjs/stylex; export const tokens stylex.defineVars({ primaryTxt: stylex.types.color(black), secondaryTxt: stylex.types.color(#333), borderRadius: stylex.types.length(4px), angle: stylex.types.angle(0deg), int: stylex.types.integer(2), });变量类型 条件值类型函数同样可以接收条件值对象/// tokens.stylex.js import * as stylex from stylexjs/stylex; const DARK media (prefers-color-scheme: dark); export const colors stylex.defineVars({ primaryText: stylex.types.color({ default: black, [DARK]: white }), });用法保持不变以上写法完全有效。源代码中的类型安全当变量在stylex.defineVars中用特定类型函数声明后静态类型会强制要求在stylex.createTheme中为该变量设置主题值时也必须使用相同类型的函数// tokens.stylex.js import * as stylex from stylexjs/stylex; import {tokens} from ./tokens.stylex.js; export const high stylex.defineVars({ primaryTxt: stylex.types.color(black), secondaryTxt: stylex.types.color(#222), borderRadius: stylex.types.length(8px), angle: stylex.types.angle(0deg), int: stylex.types.integer(4), });动画渐变可以通过对渐变中使用的角度变量进行动画处理实现渐变动画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, }, })模拟 round()现代浏览器开始支持 CSS 中的round()函数。在尚不支持的环境里可以通过整数类型变量来模拟取整行为const styles stylex.create({ gradient: { // Math.floor [tokens.int]: calc(16 / 9) // Math.round [tokens.int]: calc((16 / 9) 0.5) }, })利用整数类型变量在编译期/运行期的求值特性calc()表达式中的小数结果会被整型化处理calc(16 / 9)相当于Math.floor加上0.5后再取整则相当于Math.round。TypeScript 类型StyleX 提供了一组丰富的类型工具用于约束组件对外暴露的style接口让样式 API 像普通 props 一样具备类型安全。StyleXStyles样式 props 类型import type {StyleXStyles} from stylexjs/stylex; import * as stylex from stylexjs/stylex; type Props { ... style?: StyleXStyles, }; function MyComponent( { style, ...otherProps }: Props ) { return ( div {...stylex.props( localStyles.foo, localStyles.bar, style )} {/* ... */} /div ); }StyleXStyles代表任意一组合法的 StyleX 样式组件接收后与本地样式一起交给stylex.props合并。StyleXStylesWithout禁止属性如果组件不允许调用方传入某些布局类属性可以用StyleXStylesWithout显式排除import type {StyleXStylesWithout} from stylexjs/stylex; import * as stylex from stylexjs/stylex; type NoLayout StyleXStylesWithout{ position: unknown, display: unknown, top: unknown, start: unknown, end: unknown, bottom: unknown, border: unknown, borderWidth: unknown, borderBottomWidth: unknown, borderEndWidth: unknown, borderStartWidth: unknown, borderTopWidth: unknown, margin: unknown, marginBottom: unknown, marginEnd: unknown, marginStart: unknown, marginTop: unknown, padding: unknown, paddingBottom: unknown, paddingEnd: unknown, paddingStart: unknown, paddingTop: unknown, width: unknown, height: unknown, flexBasis: unknown, overflow: unknown, overflowX: unknown, overflowY: unknown, }; type Props { // ... style?: NoLayout, }; function MyComponent({style, ...}: Props) { return ( div {...stylex.props(localStyles.foo, localStyles.bar, style)} {/* ... */} /div ); }此处对象类型中列出的属性将被禁止但所有其他样式仍会被接受。从一组样式属性中接受反过来也可以用StyleXStyles的泛型参数只允许一组属性import type {StyleXStyles} from stylexjs/stylex; type Props { // ... style?: StyleXStyles{ color?: string; backgroundColor?: string; borderColor?: string; borderTopColor?: string; borderEndColor?: string; borderBottomColor?: string; borderStartColor?: string; }; };限制样式的可能值更进一步还可以限制某个属性的取值集合import type {StyleXStyles} from stylexjs/stylex; type Props { ... // 只接受 marginTop 的样式其他不接受。 // marginTop 的值只能是 0、4、8 或 16。 style?: StyleXStyles{ marginTop: 0 | 4 | 8 | 16 }, };这在实现间距规范、字号阶梯等设计系统约束时非常有用类型系统直接保证了调用方无法传入规范之外的取值。VarGroupVarGroup是调用stylex.defineVars生成的对象的类型——它将每个键映射到对应的 CSS 自定义属性引用import * as stylex from stylexjs/stylex; export const vars stylex.defineVars({ color: red, backgroundColor: blue, }); export type Vars typeof vars; /* Vars VarGroup{ color: string, backgroundColor: string, } */StaticStylesStaticStyles与StyleXStyles类似但不允许函数定义的动态样式import type {StaticStyles} from stylexjs/stylex; type Props { // ... style?: StaticStyles{ color?: red | blue | green; padding?: 0 | 4 | 8 | 16 | 32; backgroundColor?: string; borderColor?: string; borderTopColor?: string; borderEndColor?: string; borderBottomColor?: string; borderStartColor?: string; }; };适合只接受静态样式不接受运行时动态值的接口场景。ThemeThemetypeof vars类型让createTheme的产出具备与变量组精确对应的类型约束import type {VarGroup} from stylexjs/stylex; import * as stylex from stylexjs/stylex; import {vars} from ./vars.stylex; export const theme: Themetypeof vars stylex.createTheme(vars, { color: red, // OK backgroundColor: blue, // OK });结合变量类型一节可知如果变量组中某个变量是用stylex.types.color(...)等类型函数声明的那么这里为其提供主题值时也必须使用相同类型函数否则 TypeScript 会直接报错。小结StyleX 的价值在于把样式的局部性开发体验留给开发者把运行时开销交给编译期解决。使用它需要记住四条主线安装运行时包stylexjs/stylex 对应构建工具的编译器插件Rollup / Babel / Webpack / Next.js / Bun / Vite以及可选的stylexjs/dev-runtime本地快速体验与stylexjs/eslint-plugin静态校验。定义样式stylex.create()对象语法属性值可以是default 条件键伪类、媒体查询、组合条件用stylex.firstThatWorks()处理后备值、stylex.keyframes()定义动画、函数样式处理运行时动态值。应用样式stylex.props()合并样式并忽略虚假值支持条件样式、变体索引、样式对象作为 props 传递与接收null值用于取消设置样式。主题与类型.stylex.*文件中用defineVars()命名导出变量createTheme()创建可传递的主题变量类型函数保证主题值类型安全组件接口用StyleXStyles、StyleXStylesWithout、StaticStyles、Theme等类型精确约束。本文档的原始速查清单位于 docs/stylex.md它与仓库中的 React、CSS 3 等文档共同组成了面向开发者的技术速查集合可在开发过程中随时查阅对照。【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 StyleX 速查指南：从编译器配置、样式定义到主题系统与类型安全的完整实践
StyleX 速查指南从编译器配置、样式定义到主题系统与类型安全的完整实践【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/referenceStyleX 是 Facebook 开源的一款 CSS-in-JS 用户界面样式系统本指南基于本项目中的 StyleX 备忘清单位于本仓库 CSS 分类下与 React、CSS 3、Tailwind CSS 等文档并列展开。读完本文你将掌握 StyleX 从安装、各类构建工具Rollup / Babel / Webpack / Next.js的编译器配置到stylex.create()定义样式、stylex.props()应用样式、defineVars()/createTheme()搭建主题系统以及 StyleXStyles 等 TypeScript 类型的完整实战方案。入门 StyleX什么是 StyleXStyleX 是一个 CSS-in-JS 的用户界面样式系统样式用 JavaScript/TypeScript 对象语法编写但在编译期被提取为静态的原子化 CSS而不是像传统 CSS-in-JS 那样在运行时动态注入样式。这样的设计让它在运行时几乎零开销同时保留了样式与组件共处一文件的局部性开发体验。生态与配套工具围绕 StyleX 官方编译器社区与官方还提供了大量配套工具按用途归类如下VSCode 插件StyleX Intellisense提供样式属性的智能提示与校验。Vite 集成vite-plugin-stylexvite-plugin-stylex-devBabel 插件tailwind-to-stylex支持在 Tailwind CSS 项目中复用现有工具类写法。stylex-extend/babel-plugin支持使用 JSX 属性直接定义 StyleX 样式。Prettier 插件prettier-plugin-stylex-key-sort自动整理stylex.create对象中样式键的顺序。Bun 集成bun-plugin-stylex。入门模板Next.jsApp Router模板支持 StyleX 的 Next.js 项目骨架。Qwik 模板结合 StyleX 与 tailwind-to-stylex 的 Qwik 项目。Docusaurus 3 模板支持 StyleX 的 Docusaurus 3 项目。SvelteKit 模板支持 StyleX 的 SvelteKit 项目。这些模板覆盖了当前主流的前端框架可以直接作为新项目的起点省去手动串联编译器的步骤。安装与编译器配置StyleX 的核心理念是编译期提取 CSS因此除了安装运行时包外还必须为你的构建工具接入对应的编译器插件。下面按构建工具逐一说明。StyleX 运行时包npm install --save stylexjs/stylex运行时包提供stylex.create、stylex.props、stylex.keyframes、stylex.defineVars、stylex.createTheme等核心 API。编译器生产Rollupnpm install --save-dev stylexjs/rollup-plugin修改rollup.config.js注意必须在 Babel 之前使用 stylex 插件import stylexPlugin from stylexjs/rollup-plugin; const config { input: ./index.js, output: { file: ./.build/bundle.js, format: es, }, // 确保在 Babel 之前使用 stylex 插件 plugins: [stylexPlugin({ // 必需项。生成的 CSS 文件的文件路径。 fileName: ./.build/stylex.css, // 默认值false dev: false, // 所有生成的类名的前缀 classNamePrefix: x, // CSS 变量支持所必需 unstable_moduleResolution: { // 类型commonJS | haste // 默认值commonJS type: commonJS, // 项目根目录的绝对路径 rootDir: __dirname, }, })], }; export default config;在配置的简化写法中也可以直接用插件工厂返回 plugins 数组import plg from stylexjs/rollup-plugin; const config () ({ plugins: [ plg({ ...options }) ] }) export default config;关键参数说明fileName必填指定编译产物 CSS 的输出路径例如./.build/stylex.css。dev开发模式开关默认false开发时设为true可以输出更易调试的类名与未压缩 CSS。classNamePrefix所有生成的类名的统一前缀默认x。unstable_moduleResolutionCSS 变量主题系统支持所必需。type支持commonJS默认与haste两种解析策略rootDir填写项目根目录的绝对路径。编译器开发Babelnpm install --save-dev stylexjs/babel-plugin修改babel.config.jsimport styleX from stylexjs/babel-plugin; const config { plugins: [ [styleX, { dev: true, // 设置为 true 以进行快照测试 // 默认值false test: false, // CSS 变量支持所必需 unstable_moduleResolution: { // 类型commonJS | haste // 默认值commonJS type: commonJS, // 项目根目录的绝对路径 rootDir: __dirname, } }], ], }; export default config;test选项在快照测试场景下设为true可以让编译输出保持确定性dev在开发环境设为true。编译器生产Webpacknpm install --save-dev stylexjs/webpack-plugin修改webpack.config.js同样确保在 Babel 之前使用 stylex 插件const StylexPlugin require(stylexjs/webpack-plugin); const path require(path); const config (env, argv) ({ entry: { main: ./src/index.js, }, output: { path: path.resolve(__dirname, .build), filename: [name].js, }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: babel-loader, }, ], }, plugins: [ // 确保在 Babel 之前使用 stylex 插件 new StylexPlugin({ filename: styles.[contenthash].css, // 获取 webpack 的模式并为开发设置值 dev: argv.mode development, // 使用静态生成的 CSS 文件而不是运行时注入的 CSS。 // 即使在开发环境中也是如此。 runtimeInjection: false, // 可选的。默认值x classNamePrefix: x, // CSS 变量支持所必需 unstable_moduleResolution: { // 类型commonJS | haste // 默认值commonJS type: commonJS, // 项目根目录的绝对路径 rootDir: __dirname, }, }), ], cache: true, }); module.exports config;Webpack 版的额外要点filename支持[contenthash]占位符便于长期缓存例如styles.[contenthash].css。dev可以直接读取argv.mode自动联动开发/生产。runtimeInjection: false表示使用静态生成的 CSS 文件而不是运行时注入的 CSS即便在开发环境也保持一致行为避免生产与开发出现样式差异。编译器生产Next.jsnpm install --save-dev stylexjs/nextjs-plugin \ stylexjs/babel-plugin rimraf在package.json中添加清理脚本确保每次启动或构建前清空.next缓存{ scripts: { ..., predev: rimraf .next, prebuild: rimraf .next } }修改 Babel 配置.babelrc.jsmodule.exports { presets: [next/babel], plugins: [ [ stylexjs/babel-plugin, { dev: process.env.NODE_ENV development, test: process.env.NODE_ENV test, runtimeInjection: false, genConditionalClasses: true, treeshakeCompensation: true, unstable_moduleResolution: { type: commonJS, rootDir: __dirname, }, }, ], ], };这里的genConditionalClasses为条件样式生成独立的类便于按需启用与treeshakeCompensation补偿 Tree-shaking 带来的副作用是 Next.js 场景下推荐的官方配置项配合presets: [next/babel]使用。修改 Next.js 配置next.config.mjs/** type {import(next).NextConfig} */ import stylexPlugin from stylexjs/nextjs-plugin; const nextConfig {}; const __dirname new URL(., import.meta.url).pathname; export default stylexPlugin({ rootDir: __dirname, })(nextConfig);仅限本地开发无需构建配置如果想在搭建完整构建流水线之前先体验 StyleX可以安装本地开发运行时npm install --save-dev stylexjs/dev-runtime开发运行时必须导入到应用程序的 JavaScript 入口点并进行配置import inject from stylexjs/dev-runtime; inject({ classNamePrefix: x, dev: true, test: false, });这种方式把样式编译与注入放在运行时完成适合原型验证正式项目仍应切换到生产编译器以获得静态 CSS 与最小运行时开销。用 ESLint 捕捉错误StyleX 编译器本身不会验证你的样式而且会编译许多无效样式。因此创作样式时应当使用 ESLint 插件来提前捕获这些错误npm install --save-dev stylexjs/eslint-plugin修改 ESLint 配置.eslintrc.jsmodule.exports { plugins: [stylexjs], rules: { stylexjs/valid-styles: error, }, };启用valid-styles规则后例如拼错的属性名、非法的值等无效样式会在 lint 阶段直接报错从而与编译器不校验的宽松行为互补。定义样式创建样式样式使用对象语法和create()API 定义import * as stylex from stylexjs/stylex; const styles stylex.create({ root: { width: 100%, maxWidth: 800, minHeight: 40, }, });再例如一个带基础排版与高亮变体的示例import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { fontSize: 16, lineHeight: 1.5, color: rgb(60,60,60), }, highlighted: { color: rebeccapurple, }, });伪类先定义基础样式import * as stylex from stylexjs/stylex; const styles stylex.create({ button: { backgroundColor: lightblue, }, });为名为button的样式在背景上添加:hover和:active伪类——只需把属性值改为一个默认值 条件键的对象import * as stylex from stylexjs/stylex; const styles stylex.create({ button: { backgroundColor: { default: lightblue, :hover: blue, :active: darkblue, }, }, });这是 StyleX 的核心心智模型属性值可以是一个条件表default为兜底值其余键为伪类、媒体查询等条件选择器。伪元素伪元素如::placeholder可以直接作为样式键import * as stylex from stylexjs/stylex; const styles stylex.create({ input: { // 伪元素 ::placeholder: { color: #999, }, color: { default: #333, // 伪类 :invalid: red, }, }, });这里同时展示了伪元素::placeholder整体作为嵌套对象与伪类:invalid作为条件表键两种写法。媒体查询和其他 规则媒体查询同样可以作为属性值中的条件import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { width: { default: 800, media (max-width: 800px): 100%, media (min-width: 1540px): 1366, }, }, });同理其他规则如supports、container也可以按此模式作为条件使用。组合条件当需要组合媒体查询和伪选择器时需要嵌套超过一层import * as stylex from stylexjs/stylex; const styles stylex.create({ button: { color: { default: var(--blue-link), :hover: { default: null, media (hover: hover): scale(1.1), }, :active: scale(0.9), }, }, });:hover下的值再次是一个条件表default为null不生效仅在支持悬停的媒体环境下应用scale(1.1)。注意这里的scale用于color只是文档示例实际生产代码中请把变换类属性与颜色区分开。后备样式传统 CSS 中可以通过重复声明同一属性实现后备值浏览器取最后一个支持的声明.header { position: fixed; position: -webkit-sticky; position: sticky; }StyleX 用firstThatWorks函数实现相同目的——编译器会按顺序生成后备声明浏览器依次尝试直到找到可识别的值import * as stylex from stylexjs/stylex; const styles stylex.create({ header: { position: stylex.firstThatWorks(sticky, -webkit-sticky, fixed), }, });关键帧动画使用stylex.keyframes()函数定义关键帧动画然后在样式中通过animationName引用import * as stylex from stylexjs/stylex; const fadeIn stylex.keyframes({ from: {opacity: 0}, to: {opacity: 1}, }); const styles stylex.create({ base: { animationName: fadeIn, animationDuration: 1s, }, });keyframes()会为动画名生成稳定的标识符并随编译产物一起输出到 CSS 文件中。动态样式当某个样式值只能在运行时确定时可以使用函数样式import * as stylex from stylexjs/stylex; const styles stylex.create({ // 函数参数必须是简单标识符 // -- 不允许解构或默认值 bar: (height) ({ height, // 函数体必须是对象字面量 // -- 不允许使用 { return {} } }), }); function MyComponent() { // height 的值在编译时不能确定。 const [height, setHeight] useState(10); return div {...stylex.props(styles.bar(height))} /; }使用动态样式有两条硬性语法约束函数参数必须是简单标识符不允许解构或默认值例如({ height }) 或(height 10) 都是非法的。函数体必须是对象字面量不允许{ return {} }这种语句块形式。注意动态样式是一项高级功能应谨慎使用。对于大多数用例条件样式isActive styles.active应该已经足够只有真正的运行时动态值才需要函数样式。使用样式合并样式stylex.props()接收任意数量的样式对象并合并为一个包含className与style的对象展开到元素上即可import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { fontSize: 16, lineHeight: 1.5, color: grey, }, highlighted: { color: rebeccapurple, }, }); div {...stylex.props( styles.base, styles.highlighted )} /;合并顺序决定样式优先级后传入的样式在冲突属性上覆盖先传入的。上例中highlighted在后文字为紫色如果顺序颠倒文字将变回灰色div {...stylex.props( styles.highlighted, styles.base )} /条件样式通过常见的 JavaScript 模式三元表达式和运算符可以在运行时有条件地应用样式。stylex.props会忽略虚假值如null、undefined或falsediv {...stylex.props( styles.base, props.isHighlighted styles.highlighted, isActive ? styles.active : styles.inactive, )} /这是日常开发中使用频率最高的能力既有满足条件才应用也有二选一的变体选择。样式变体先把各个变体定义为独立样式import * as stylex from stylexjs/stylex; const styles stylex.create({ violet: { backgroundColor: { default: blueviolet, :hover: darkviolet, }, color: white, }, gray: { backgroundColor: { default: gainsboro, :hover: lightgray, }, }, // ... more variants here ... });然后通过把variant属性作为样式对象的键用索引方式应用对应变体function Button({variant, ...props}) { return ( button {...props} {...stylex.props(styles[variant])} / ); }styles[variant]的索引访问天然适配变体名即样式键的设计非常适合实现 Button、Badge 这类多形态组件。样式作为 PropsStyleX 样式对象可以作为styleprop 直接传给自定义组件CustomComponent style{styles.base} /注意不要这样用stylex.props()返回的是带有className和style的普通对象如果把它当作样式值传入会导致组件拿到错误结构// ❌ 不要这样使用! ⚠️ CustomComponent style{stylex.props(styles.base)} /正确做法是把原始样式对象可以是数组同样支持条件项作为style传入由接收方自行用stylex.props合并CustomComponent style{[ styles.base, isHighlighted styles.highlighted ]} /接受组件中的样式自定义组件内部通过stylex.props将外部传入的style与本地样式合并应用import * as stylex from stylexjs/stylex; // Local Styles const styles stylex.create({ base: { /*...*/ }, }); function CustomComponent({style}) { return ( div {...stylex.props(styles.base, style)} / ); }style放在后面意味着外部传入的样式可以覆盖本地base中的同名属性实现了可被调用方定制的组件接口。取消设置样式将样式属性设置为null会删除 StyleX 之前为该属性应用的任何样式import * as stylex from stylexjs/stylex; const styles stylex.create({ base: { color: null, }, });这常与条件表配合当default为null时除非命中某个条件分支否则该属性不输出从而避免继承父级的同名样式。主题系统StyleX 的主题系统建立在 CSS 变量之上defineVars()声明变量组createTheme()为同一变量组产出多套主题通过stylex.props应用到元素后变量作用于该元素及其所有后代。使用媒体查询定义主题变量可以利用常量避免重复书写媒体查询import * as stylex from stylexjs/stylex; // 可以使用常量来避免重复媒体查询 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}, });定义变量import * as stylex from stylexjs/stylex; export const tokens stylex.defineVars({ primaryText: black, secondaryText: #333, borderRadius: 4px, fontFamily: system-ui, sans-serif, fontSize: 16px, });这会在 HTML 文档的:root处定义 CSS 变量。变量可以作为常量导入并在stylex.create调用中使用。使用变量把颜色与间距两组变量分别定义import * as stylex from stylexjs/stylex; // 可以使用常量来避免重复媒体查询 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, });然后像普通常量一样导入并引用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, }, });定义变量时的规则变量必须定义在.stylex.js文件中文件扩展名必须为以下之一.stylex.js.stylex.mjs.stylex.cjs.stylex.ts.stylex.tsx.stylex.jsx变量必须命名导出不能是 default 导出、不能间接导出、不能嵌套在其他对象内部// ✅ - 命名导出 export const colors stylex.defineVars({ /* ... */ }); const sizeVars { ... }; // ✅ - 另一个命名导出 export const sizes stylex.defineVars(sizeVars);以下写法均不允许// ❌ - 只允许命名导出 export default stylex.defineVars({ /* ... */ }); // ❌ - 变量必须直接导出 const x stylex.defineVars({ /* ... */ }); export const colors x; // ❌ - 变量不能嵌套在另一个对象内部 export const colors { foregrounds: stylex.defineVars({ /* ... */ }), backgrounds: stylex.defineVars({ /* ... */ }), };这些约束的存在是为了让编译器在静态分析阶段能够确定每个变量的归属变量组从而正确生成 CSS 变量引用与主题覆盖规则。创建主题import * as stylex from stylexjs/stylex; import {colors, spacing} from ./tokens.stylex; // 可以使用常量来避免重复媒体查询 const DARK media (prefers-color-scheme: dark); // Dracula 主题 export const dracula stylex.createTheme(colors, { primaryText: {default: purple, [DARK]: lightpurple}, secondaryText: {default: pink, [DARK]: hotpink}, accent: red, background: {default: #555, [DARK]: black}, lineColor: red, });应用主题主题对象与stylex.create()创建的样式对象类似用stylex.props()将它应用到元素上即可覆盖该元素及其所有后代的变量div {...stylex.props(dracula, styles.container)} {children} /div;关于主题有三条重要规则创建主题时必须覆盖变量组中的所有变量——这一选择是为了帮助开发者发现意外遗漏。主题可以在代码库中的任何位置通过stylex.createTheme()创建并在文件或组件之间自由传递。如果同一变量组的多个主题应用于同一个 HTML 元素则最后应用的主题获胜。变量类型所有变量值都可以是任意字符串若要为变量声明类型可用对应的类型函数包裹import * as stylex from stylexjs/stylex; export const tokens stylex.defineVars({ primaryTxt: stylex.types.color(black), secondaryTxt: stylex.types.color(#333), borderRadius: stylex.types.length(4px), angle: stylex.types.angle(0deg), int: stylex.types.integer(2), });变量类型 条件值类型函数同样可以接收条件值对象/// tokens.stylex.js import * as stylex from stylexjs/stylex; const DARK media (prefers-color-scheme: dark); export const colors stylex.defineVars({ primaryText: stylex.types.color({ default: black, [DARK]: white }), });用法保持不变以上写法完全有效。源代码中的类型安全当变量在stylex.defineVars中用特定类型函数声明后静态类型会强制要求在stylex.createTheme中为该变量设置主题值时也必须使用相同类型的函数// tokens.stylex.js import * as stylex from stylexjs/stylex; import {tokens} from ./tokens.stylex.js; export const high stylex.defineVars({ primaryTxt: stylex.types.color(black), secondaryTxt: stylex.types.color(#222), borderRadius: stylex.types.length(8px), angle: stylex.types.angle(0deg), int: stylex.types.integer(4), });动画渐变可以通过对渐变中使用的角度变量进行动画处理实现渐变动画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, }, })模拟 round()现代浏览器开始支持 CSS 中的round()函数。在尚不支持的环境里可以通过整数类型变量来模拟取整行为const styles stylex.create({ gradient: { // Math.floor [tokens.int]: calc(16 / 9) // Math.round [tokens.int]: calc((16 / 9) 0.5) }, })利用整数类型变量在编译期/运行期的求值特性calc()表达式中的小数结果会被整型化处理calc(16 / 9)相当于Math.floor加上0.5后再取整则相当于Math.round。TypeScript 类型StyleX 提供了一组丰富的类型工具用于约束组件对外暴露的style接口让样式 API 像普通 props 一样具备类型安全。StyleXStyles样式 props 类型import type {StyleXStyles} from stylexjs/stylex; import * as stylex from stylexjs/stylex; type Props { ... style?: StyleXStyles, }; function MyComponent( { style, ...otherProps }: Props ) { return ( div {...stylex.props( localStyles.foo, localStyles.bar, style )} {/* ... */} /div ); }StyleXStyles代表任意一组合法的 StyleX 样式组件接收后与本地样式一起交给stylex.props合并。StyleXStylesWithout禁止属性如果组件不允许调用方传入某些布局类属性可以用StyleXStylesWithout显式排除import type {StyleXStylesWithout} from stylexjs/stylex; import * as stylex from stylexjs/stylex; type NoLayout StyleXStylesWithout{ position: unknown, display: unknown, top: unknown, start: unknown, end: unknown, bottom: unknown, border: unknown, borderWidth: unknown, borderBottomWidth: unknown, borderEndWidth: unknown, borderStartWidth: unknown, borderTopWidth: unknown, margin: unknown, marginBottom: unknown, marginEnd: unknown, marginStart: unknown, marginTop: unknown, padding: unknown, paddingBottom: unknown, paddingEnd: unknown, paddingStart: unknown, paddingTop: unknown, width: unknown, height: unknown, flexBasis: unknown, overflow: unknown, overflowX: unknown, overflowY: unknown, }; type Props { // ... style?: NoLayout, }; function MyComponent({style, ...}: Props) { return ( div {...stylex.props(localStyles.foo, localStyles.bar, style)} {/* ... */} /div ); }此处对象类型中列出的属性将被禁止但所有其他样式仍会被接受。从一组样式属性中接受反过来也可以用StyleXStyles的泛型参数只允许一组属性import type {StyleXStyles} from stylexjs/stylex; type Props { // ... style?: StyleXStyles{ color?: string; backgroundColor?: string; borderColor?: string; borderTopColor?: string; borderEndColor?: string; borderBottomColor?: string; borderStartColor?: string; }; };限制样式的可能值更进一步还可以限制某个属性的取值集合import type {StyleXStyles} from stylexjs/stylex; type Props { ... // 只接受 marginTop 的样式其他不接受。 // marginTop 的值只能是 0、4、8 或 16。 style?: StyleXStyles{ marginTop: 0 | 4 | 8 | 16 }, };这在实现间距规范、字号阶梯等设计系统约束时非常有用类型系统直接保证了调用方无法传入规范之外的取值。VarGroupVarGroup是调用stylex.defineVars生成的对象的类型——它将每个键映射到对应的 CSS 自定义属性引用import * as stylex from stylexjs/stylex; export const vars stylex.defineVars({ color: red, backgroundColor: blue, }); export type Vars typeof vars; /* Vars VarGroup{ color: string, backgroundColor: string, } */StaticStylesStaticStyles与StyleXStyles类似但不允许函数定义的动态样式import type {StaticStyles} from stylexjs/stylex; type Props { // ... style?: StaticStyles{ color?: red | blue | green; padding?: 0 | 4 | 8 | 16 | 32; backgroundColor?: string; borderColor?: string; borderTopColor?: string; borderEndColor?: string; borderBottomColor?: string; borderStartColor?: string; }; };适合只接受静态样式不接受运行时动态值的接口场景。ThemeThemetypeof vars类型让createTheme的产出具备与变量组精确对应的类型约束import type {VarGroup} from stylexjs/stylex; import * as stylex from stylexjs/stylex; import {vars} from ./vars.stylex; export const theme: Themetypeof vars stylex.createTheme(vars, { color: red, // OK backgroundColor: blue, // OK });结合变量类型一节可知如果变量组中某个变量是用stylex.types.color(...)等类型函数声明的那么这里为其提供主题值时也必须使用相同类型函数否则 TypeScript 会直接报错。小结StyleX 的价值在于把样式的局部性开发体验留给开发者把运行时开销交给编译期解决。使用它需要记住四条主线安装运行时包stylexjs/stylex 对应构建工具的编译器插件Rollup / Babel / Webpack / Next.js / Bun / Vite以及可选的stylexjs/dev-runtime本地快速体验与stylexjs/eslint-plugin静态校验。定义样式stylex.create()对象语法属性值可以是default 条件键伪类、媒体查询、组合条件用stylex.firstThatWorks()处理后备值、stylex.keyframes()定义动画、函数样式处理运行时动态值。应用样式stylex.props()合并样式并忽略虚假值支持条件样式、变体索引、样式对象作为 props 传递与接收null值用于取消设置样式。主题与类型.stylex.*文件中用defineVars()命名导出变量createTheme()创建可传递的主题变量类型函数保证主题值类型安全组件接口用StyleXStyles、StyleXStylesWithout、StaticStyles、Theme等类型精确约束。本文档的原始速查清单位于 docs/stylex.md它与仓库中的 React、CSS 3 等文档共同组成了面向开发者的技术速查集合可在开发过程中随时查阅对照。【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考