SuperAPI AI 工具集

clerk-custom-ui

前端与建站

查看项目

更新于 10-16 06:48

技能介绍

用途:本技能覆盖 Clerk 认证的两类定制需求——用钩子构建自定义登录/注册流程,以及定制 Clerk 预置组件的外观(主题、样式、品牌)。使用前需确保 ClerkProvider 包裹应用(参见 clerk-setup 技能),并查看 package.json 中的 SDK 版本,以确定使用哪套自定义流程参考。

主要能力:自定义流程方面,提供 useSignIn、useSignUp 钩子参考,按 SDK 版本分为 Core 2/LTS(core-2/custom-sign-in.md、core-2/custom-sign-up.md)与当前 SDK v7+(core-3/ 对应文件);当前 SDK 还提供 <Show> 组件模式(core-3/show-component.md),Core 2 使用 <SignedIn>、<SignedOut>、<Protect>。外观定制方面,支持 appearance 属性的 variables(如 colorPrimary、colorBackground、borderRadius)、options(如 logoImageUrl、socialButtonsVariant、socialButtonsPlacement、showOptionalFields)、主题与自带 CSS。

使用方式:外观定制通过 appearance 属性传入配置,例如在 <SignIn> 上设置 variables 与 options。主题从 @clerk/ui 安装并导入,如 npm install @clerk/ui 后 import { dark } from '@clerk/ui/themes',再传给 ClerkProvider 的 appearance.theme;主题可叠加为数组,后者优先。可用主题有 dark、neobrutalism、shadcn、simple。若项目含 components.json(已装 shadcn/ui),应优先应用 shadcn 主题,并在全局样式中导入 @clerk/ui/themes/shadcn.css。

适用场景:需要自建登录/注册界面、统一品牌视觉、适配深色模式或与 shadcn 设计系统对齐的项目。

限制与注意:Core 2 与当前 SDK 的 useSignIn/useSignUp API 完全不同,需按版本选择参考;Core 2 中 options 名为 layout,主题从 @clerk/themes 导入,colorRing 与 colorModalBackdrop 默认 15% 不透明度,showOptionalFields 默认 true。常见问题:颜色不生效应使用 colorPrimary 而非 primaryColor;logo 需放在 options(Core 2 为 layout)内;样式应通过 appearance 属性而非直接 CSS(除非使用自带 CSS)。