Franken-UI 中 Alert 组件的样式定制指南

Alert 组件样式问题分析

在 Franken-UI 项目中，Alert 组件在使用 presetQuick 预设时，alert-danger 会显示红色边框，而 alert-success 则没有对应的绿色样式。这实际上是设计上的有意为之，因为 Shadcn 本身并不内置支持 success 和 warning 的样式变体。

解决方案比较

方法一：直接 CSS 覆盖

最简单的解决方案是在应用的 CSS 文件中直接添加自定义样式：

.uk-alert-success {
  border: 1px solid green;
  color: green;
}

.uk-alert-warning {
  border: 1px solid orange;
  color: orange;
}

这种方法的优点是简单直接，缺点是缺乏对暗黑模式的支持。

方法二：使用主题变量

更专业的做法是利用 Franken-UI 的主题系统，通过添加新的颜色变量来实现：

.uk-alert-success {
  @apply border border-success text-success;
}

.uk-alert-warning {
  @apply border border-warning text-warning;
}

这种方法需要先在主题配置中定义 success 和 warning 颜色变量，但能完美支持暗黑模式切换。

方法三：使用 hook-misc

对于使用 presetQuick 的用户，可以通过 hook-misc 来添加自定义样式：

module.exports = {
  presets: [presetQuick({
    theme: "blue",
    overrides: {
      alert: {
        "hook-misc": {
          ".uk-alert-success": {
            color: '#32d296',
            borderColor: '#32d296'
          }
        }
      }
    }
  })],
  // 其他配置...
}

技术细节说明

需要注意的是，hook-success 钩子在这种情况下不适用，因为 presetQuick 使用的是 Shadcn 的钩子系统，而 success 和 warning 变体已经被移除。hook-misc 是更灵活的选择，可以添加任何自定义样式规则。

最佳实践建议

1. 对于简单项目，直接 CSS 覆盖是最快捷的解决方案
2. 对于需要支持暗黑模式的项目，推荐使用主题变量方法
3. 对于使用 presetQuick 的项目，hook-misc 是最合适的定制方式
4. 保持样式的一致性，确保所有 Alert 变体遵循相同的设计语言

通过以上方法，开发者可以灵活地为 Franken-UI 的 Alert 组件添加所需的 success 和 warning 样式，满足不同项目的设计需求。