Ver código fonte

♻️ refactor(components): 重构Button组件样式系统

- 新增ResetTaroButton组件,实现无!important的样式重置方案
- 优化样式优先级结构,用户className可自然覆盖默认样式
- 调整样式组合顺序,先应用变体样式再叠加用户自定义样式
- 移除导出的buttonVariants变量,优化组件封装性
yourname 3 meses atrás
pai
commit
2c04a385cf
1 arquivos alterados com 23 adições e 6 exclusões
  1. 23 6
      mini/src/components/ui/button.tsx

+ 23 - 6
mini/src/components/ui/button.tsx

@@ -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 }