SuperAPI AI 工具集

components.styles

编程与开发

查看项目

更新于 10-15 20:13

技能介绍

用途:为 CDS 组件添加样式 API(styles、classNames 及静态 classNames),并同步更新组件文档。适用于 Web 与移动端组件。

主要能力与流程:先定位组件源文件(packages/web/src/[source-category]/[ComponentName].tsx 或 packages/mobile/src/[source-category]/[ComponentName].tsx);评估组件结构,若可简化需先向用户确认,避免为可能重构的元素添加样式;识别可样式化元素(根元素、命名区块、子组件、条件渲染元素),选择器名须来自已批准列表,新增需用户明确确认。

Web 组件需三步:添加带 JSDoc 的静态 classNames 对象(cds- 前缀、PascalCase 组件名、camelCase 子元素);用 StylesAndClassNames 工具类型更新 Props;在 JSX 中用 cx() 应用静态与动态 classNames 及 styles。还需为静态 classNames 添加测试。移动端仅需手动定义 styles 类型并在实现中应用。

文档更新:运行 yarn nx run docs:docgen 重新生成样式数据,创建或更新 _webStyles.mdx、_mobileStyles.mdx,并在 index.mdx 中引入渲染。

限制:选择器一旦发布,更改或删除即为破坏性变更;JSDoc 需用陈述句、无句号、简洁名词短语,条件元素追加渲染条件说明。具体价格、平台支持等资料暂未提供。