SuperAPI AI 工具集

stylex-styling

前端与建站

查看项目

更新于 10-16 04:54

技能介绍

用途:本规范用于指导项目中使用 StyleX 进行样式开发,覆盖设计令牌、响应式断点与主题感知颜色等场景。

主要能力:

  1. 设计令牌。从 @/tokens.stylex.ts 导入,包含 color(主题感知颜色,如 textMain、backgroundRaised、controlActive)、controlSize(间距与尺寸,_1 至 _9)、font(排版值,如 weight_5)。
  2. 断点。从 @/breakpoints 导入,由 .babelrc.js 中的 Babel 插件定义,类型声明位于 src/babel.d.ts,用法为 { default: value, [breakpoints.md]: largeScreenValue }。
  3. 自定义 css prop。使用 css={styles.someStyle} 替代 {...stylex.props(styles.someStyle)},由自定义 Babel 插件转译,并支持数组形式,如 css={[styles.base, isActive && styles.active]}。

使用要点:始终使用设计令牌,避免硬编码颜色、间距与字体值;优先使用 css prop;条件样式用数组;默认考虑移动优先并叠加断点覆盖;使用可适配明暗主题的颜色令牌;伪选择器写在对象中,如 { default: value, ":hover": hoverValue }。示例展示了按钮组件通过 stylex.create 定义样式,结合令牌、断点与悬停状态。

适用场景:需要在本项目中处理组件样式、响应式布局和主题色时。

限制:资料未提供安装方式、版本要求、完整 API 说明及浏览器兼容性等细节。