如何修改上传按钮组件样式

背景

系统自带的上传按钮有点丑，并且大的样式无法修改，想了个方法用Tailwind的按钮包装了系统自带的按钮，实现了样式的统一

解决方案

建立Uploadbutton 组件：

import React, { ChangeEvent,useRef } from 'react';

import { Button } from '@/components/ui/button';
import { TreeDataItem } from '@/lib/utils';

interface Question {
...
}

interface Option {
...
}

type Props = {
  disabled: boolean;
  onUpload: ( result: any ) => void;
};

const UploadButton = ( { disabled, onUpload }: Props ) => {
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const handleButtonClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const parseQuestions = (content: string): { questions: Question[] } => {
    ...
  };

  const generateTreeData = ( questions:  Question[]) : { data: TreeDataItem[] } => {
    ...
  };

  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    
    const file = e.target.files?.[0];
    if (!file) return;

    try {
      const content = await file.text();
      
      const { questions } = parseQuestions(content);
      const { data } = generateTreeData(questions);

      const results = {
        data: data,
        jsondata: questions
      };

      onUpload( results );
    } catch (error) {
      console.error('Error processing file:', error);
    }
  }

  return (
    <div className="w-full lg:w-auto">
      <input
        type="file"
        ref={fileInputRef}
        accept=".txt"
        onChange={handleFileChange}
        className="hidden"
      />
      <Button
        disabled={disabled}
        onClick={handleButtonClick} 
        size="sm"
        className="w-full lg:w-auto"
      >
        Import TXT
      </Button>
    </div>
  );
};

export default UploadButton;

分解来说，

1. 定义组件，并定义onUpload 函数作为组件参数
2. 定义 fileInputRef ，绑定给原始上传控件
3. 再定义 handleButtonClick 函数，函数里调用上传控件的Click方法
4. 定义Button控件，将点击事件绑定给handleButtonClick
5. 定义handleFileChange函数，绑定原始上传控件的onChange事件
6. 在handleFileChange函数，用 await file.text() 得到文件内容，并处理加工，把结果通过onUpload 函数，传输给外部调用者