Selaa lähdekoodia

🐛 fix(ui): 修复按钮禁用状态样式问题

- 为重置样式添加 [&[disabled]]:text-inherit 以保持禁用状态文本颜色
- 修改 buttonVariants 中禁用状态选择器为 [&[disabled]] 格式以提高兼容性
- 优化 disabled 属性传递逻辑,仅在明确为 true 时才传递该属性
yourname 3 kuukautta sitten
vanhempi
sitoutus
f214f2a5ae
1 muutettua tiedostoa jossa 4 lisäystä ja 3 poistoa
  1. 4 3
      mini/src/components/ui/button.tsx

+ 4 - 3
mini/src/components/ui/button.tsx

@@ -9,7 +9,7 @@ interface ResetButtonProps extends TaroButtonProps {
 
 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'
+  const resetStyles = 'w-auto bg-transparent border-0 text-inherit text-sm leading-normal p-0 m-0 min-h-0 min-w-0 [&[disabled]]:text-inherit'
   
   return (
     <TaroButton
@@ -21,7 +21,7 @@ const ResetTaroButton = ({ className, ...props }: ResetButtonProps) => {
 
 // 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',
+  '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',
   {
     variants: {
       variant: {
@@ -52,13 +52,14 @@ interface ButtonProps extends Omit<TaroButtonProps, 'size'>, VariantProps<typeof
   children?: React.ReactNode
 }
 
-export function Button({ className, variant, size, ...props }: ButtonProps) {
+export function Button({ className, variant, size, disabled, ...props }: ButtonProps) {
   return (
     <ResetTaroButton
       className={cn(
         buttonVariants({ variant, size }), // 先应用变体样式
         className // 最后应用用户样式(确保能覆盖前面的样式)
       )}
+      disabled={disabled === true? true: undefined}
       {...props}
     />
   )