第五章：主题与样式定制

自定义组件样式

1. 理解Shadcn的样式架构

Shadcn组件基于以下技术栈构建：

  • Tailwind CSS：提供实用优先的原子化CSS类
  • CSS变量：实现动态主题支持
  • Radix UI：作为无样式组件基础层

组件样式通过@layer components在Tailwind配置中扩展，支持三种定制方式：

  1. 全局样式覆盖（tailwind.config.js）
  2. 组件级样式覆写（使用CSS变量）
  3. 运行时动态主题切换

2. 样式定制方法

2.1 通过Tailwind配置定制

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'hsl(222.2 47.4% 11.2%)',
          foreground: 'hsl(210 40% 98%)'
        }
      }
    }
  }
}

2.2 组件级样式覆写

// 示例：自定义按钮样式
<Button 
  className="bg-[hsl(280,100%,70%)] hover:bg-[hsl(280,100%,60%)]"
  style={{
    '--radius': '0.5rem' // 覆盖CSS变量
  }}
/>

2.3 使用CSS变量深度定制

/* globals.css */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  
  /* 自定义变量 */
  --custom-accent: 280 100% 70%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

3. 实战技巧

3.1 样式组合模式

// 组合Tailwind类与自定义样式
function CustomCard({ className, ...props }) {
  return (
    <Card 
      className={cn(
        "bg-gradient-to-r from-primary to-[hsl(280,100%,70%)]",
        className
      )}
      {...props}
    />
  )
}

3.2 动态主题切换

// 主题切换工具函数
function toggleTheme() {
  document.documentElement.classList.toggle('dark')
  localStorage.setItem('theme', 
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  )
}

4. 调试与验证

  • 使用浏览器开发者工具检查计算样式
  • 验证CSS变量级联效果
  • 测试不同主题下的对比度（推荐使用WCAG标准）

5. 注意事项

  1. 避免!important覆盖
  2. 保持自定义样式与设计系统的一致性
  3. 移动端优先的响应式设计原则
  4. 考虑暗黑模式的兼容性设计

专业建议：建议将自定义样式集中管理，创建styles/目录存放组件样式覆写文件，保持项目可维护性。

Last Updated::