name	create-component-style
description	在 monorepo 中为新组件编写样式的步骤、约定与示例，说明如何使用 @vanilla-extract 和统一 token 管理、实现变体类与低优先级选择器的最佳实践。

新组件实践指南（中文）——创建样式

本文档记录了在本 monorepo 中新增 UI 组件的可复用流程，以组件为示例。目标是形成一套可重复、可复用的惯例：样式通过类名控制、React 组件保持精简。

目标

前置准备

本次示例涉及的文件

packages/camphora-styled/src/<component>.css.ts —— 基础样式与变体类（如 <componentPrimary>, <componentSm>）。

可复用步骤（样式部分）

设计 token 与样式
- 在 packages/camphora-styled/src/tokens 中新增或复用所需 token（颜色、尺寸、层级、排版）。
- 使用 @vanilla-extract/css 在 packages/camphora-styled/src/<component>.css.ts 中实现基础 <component> 样式。
- 将变体（颜色、尺寸、状态）实现为独立类，且通过选择器与基础 <component> 组合（例如使用 ${<component>}& 模式），保持选择器简洁且低优先级。
- 注意：在 selectors 对象中，使用 ${baseClass}& 来表示当元素同时具有基础类和当前变体类时应用样式。这利用了 vanilla-extract 的 & 占位符，代表当前类的名称。避免直接嵌套选择器，因为 vanilla-extract 不支持 Sass 风格的嵌套。

为什么优先用类名？

注意与约定

记录时间：2026-01-10

Más de este repositorio

mismo repositorio

创建可复用的 React 组件实践指南，涵盖 props 与类型约定、无状态原则、类名合并（clsx）、原生属性透传及导出规范，附示例实现。

本技能用于在网站文档中为组件创建示例页，说明示例页应包含的要素与组织规范：组件定位、可复制运行的基础示例、常见变体、交互与边界条件、可访问性要点以及测试与视觉回归快照路径。示例采用 MDX/TSX 格式并保证代码可直接复制运行。

验证与更新：定义组件或功能的验证流程与更新指南，包括测试策略、回归检测、变更日志维护、验证准则和更新发布步骤，确保修改可追溯、可回滚且满足可访问性与兼容性要求。

name	create-component-style
description	在 monorepo 中为新组件编写样式的步骤、约定与示例，说明如何使用 @vanilla-extract 和统一 token 管理、实现变体类与低优先级选择器的最佳实践。