|
|
@@ -2,6 +2,24 @@ import { Button as TaroButton, ButtonProps as TaroButtonProps } from '@tarojs/co
|
|
|
import { cn } from '@/utils/cn'
|
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
|
|
|
|
+// 1. 基础重置按钮:仅清除Taro默认样式(不使用!important)
|
|
|
+interface ResetButtonProps extends TaroButtonProps {
|
|
|
+ className?: string
|
|
|
+}
|
|
|
+
|
|
|
+const ResetTaroButton = ({ className, ...props }: ResetButtonProps) => {
|
|
|
+ // 重置样式:仅清除默认样式,不强制覆盖(无!前缀)
|
|
|
+ const resetStyles = 'w-auto bg-transparent border-0 text-inherit text-sm leading-normal p-0 m-0 min-h-0 min-w-0'
|
|
|
+
|
|
|
+ return (
|
|
|
+ <TaroButton
|
|
|
+ className={cn(resetStyles, className)} // 允许用户className覆盖重置样式
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+// 2. 按钮样式变体
|
|
|
const buttonVariants = cva(
|
|
|
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
|
|
|
{
|
|
|
@@ -28,6 +46,7 @@ const buttonVariants = cva(
|
|
|
}
|
|
|
)
|
|
|
|
|
|
+// 3. 业务按钮组件(基于重置按钮)
|
|
|
interface ButtonProps extends Omit<TaroButtonProps, 'size'>, VariantProps<typeof buttonVariants> {
|
|
|
className?: string
|
|
|
children?: React.ReactNode
|
|
|
@@ -35,16 +54,14 @@ interface ButtonProps extends Omit<TaroButtonProps, 'size'>, VariantProps<typeof
|
|
|
|
|
|
export function Button({ className, variant, size, ...props }: ButtonProps) {
|
|
|
return (
|
|
|
- <TaroButton
|
|
|
+ <ResetTaroButton
|
|
|
className={cn(
|
|
|
- // Reset Taro default styles
|
|
|
- '!w-auto !bg-transparent !border-0 !text-inherit !text-sm !leading-normal !p-0 !m-0 !min-h-0 !min-w-0',
|
|
|
- buttonVariants({ variant, size, className })
|
|
|
+ buttonVariants({ variant, size }), // 先应用变体样式
|
|
|
+ className // 最后应用用户样式(确保能覆盖前面的样式)
|
|
|
)}
|
|
|
{...props}
|
|
|
/>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-// 预定义的按钮样式导出
|
|
|
-export { buttonVariants }
|
|
|
+export { buttonVariants }
|