Back to Details

clerk-custom-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Component Customization

组件定制

Prerequisite: Ensure 
ClerkProvider
wraps your app. See 
setup/
.
前提条件：确保
ClerkProvider
包裹你的应用。请查看
setup/
目录。

Component Customization Options

组件定制选项

TaskDocumentation
Appearance prop overviewhttps://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/overview
Layout (structure, logo, buttons)https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/layout
Themes (pre-built dark/light)https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/themes
Variables (colors, fonts, spacing)https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/variables
CAPTCHA configurationhttps://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/captcha
Bring your own CSShttps://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/bring-your-own-css
任务文档链接
Appearance属性概览https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/overview
布局（结构、Logo、按钮）https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/layout
主题（预构建的深色/浅色主题）https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/themes
变量（颜色、字体、间距）https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/variables
CAPTCHA配置https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/captcha
自定义CSShttps://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/bring-your-own-css

Appearance Pattern

Appearance模式

typescript
<SignIn
  appearance={{
    variables: {
      colorPrimary: '#0000ff',
      borderRadius: '0.5rem',
    },
    layout: {
      logoImageUrl: '/logo.png',
      socialButtonsVariant: 'iconButton',
    },
  }}
/>
typescript
<SignIn
  appearance={{
    variables: {
      colorPrimary: '#0000ff',
      borderRadius: '0.5rem',
    },
    layout: {
      logoImageUrl: '/logo.png',
      socialButtonsVariant: 'iconButton',
    },
  }}
/>

variables (colors, typography, borders)

variables（颜色、排版、边框）

PropertyDescription
colorPrimary
Primary color throughout
colorBackground
Background color
borderRadius
Border radius (default: 
0.375rem
)
属性描述
colorPrimary
全局主色调
colorBackground
背景色
borderRadius
边框圆角（默认值：
0.375rem
）

layout (structure, logo, social buttons)

layout（结构、Logo、社交按钮）

PropertyDescription
logoImageUrl
URL to custom logo
socialButtonsVariant
'blockButton'
| 
'iconButton'
| 
'auto'
socialButtonsPlacement
'top'
| 
'bottom'
属性描述
logoImageUrl
自定义Logo的URL
socialButtonsVariant
'blockButton'
| 
'iconButton'
| 
'auto'
socialButtonsPlacement
'top'
| 
'bottom'

shadcn Theme

shadcn主题

If the project has 
components.json
 (shadcn/ui installed), use the shadcn theme:
typescript
import { shadcn } from '@clerk/themes'

<ClerkProvider
  appearance={{
    theme: shadcn,
  }}
/>
Also import shadcn CSS in your global.css:
css
@import 'tailwindcss';
@import '@clerk/themes/shadcn.css';
如果项目中有
components.json
（已安装shadcn/ui），请使用shadcn主题：
typescript
import { shadcn } from '@clerk/themes'

<ClerkProvider
  appearance={{
    theme: shadcn,
  }}
/>
同时在你的global.css中导入shadcn CSS：
css
@import 'tailwindcss';
@import '@clerk/themes/shadcn.css';

Workflow

工作流程

  1. Identify customization needs (colors, layout, theme, CSS)
  2. WebFetch the appropriate documentation from table above
  3. Follow official code examples from the docs
  4. Apply appearance prop to your Clerk components
  1. 确定定制需求（颜色、布局、主题、CSS）
  2. 从上方表格中获取对应的官方文档
  3. 遵循文档中的官方代码示例
  4. 为你的Clerk组件添加appearance属性

Common Pitfalls

常见问题

IssueSolution
Colors not applyingUse 
colorPrimary
not 
primaryColor
Logo not showingPut 
logoImageUrl
inside 
layout: {}
Social buttons wrongAdd 
socialButtonsVariant: 'iconButton'
in 
layout
Styling not workingUse appearance prop, not direct CSS (unless with bring-your-own-css)
问题解决方案
颜色未生效使用
colorPrimary
而非
primaryColor
Logo不显示将
logoImageUrl
放在
layout: {}
内部
社交按钮样式错误在
layout
中添加
socialButtonsVariant: 'iconButton'
样式不生效使用appearance属性，而非直接编写CSS（除非使用自定义CSS方案）