如何在ReactJS中自定义input type="file"组件的默认样式

直接给你可行的整合方案，核心思路是隐藏原生的file输入框，用你自定义的按钮和文本区域来触发它的选择行为，同时同步显示选中的文件名：

完整代码实现 #

import { useState } from 'react';

export const UploadFile = () => {
  // 用状态存储选中的文件名
  const [selectedFileName, setSelectedFileName] = useState('');

  const uploadFile = (e) => {
    const file = e.target.files[0];
    if (file) {
      // 更新显示的文件名，也可以在这里处理文件上传逻辑
      setSelectedFileName(file.name);
    }
  };

  // 触发原生input的点击事件
  const triggerFileSelect = () => {
    document.getElementById('fileUpload').click();
  };

  return (
    <div className="justify-between flex items-center">
      {/* 显示选中的文件名，没选的时候可以留空或者显示提示文本 */}
      <span>{selectedFileName || '未选择文件'}</span>
      {/* 自定义按钮，点击时触发原生input */}
      <button type="button" onClick={triggerFileSelect}>
        choose file
      </button>
      {/* 隐藏原生file input，保持它的功能但不显示 */}
      <input 
        type="file" 
        id="fileUpload" 
        onChange={uploadFile}
        className="hidden"
        style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}
      />
    </div>
  );
};

关键细节说明 #

• 隐藏原生input：用hidden类或者内联样式（opacity:0+position:absolute），不要用display:none，避免破坏浏览器的可访问性支持
• 文件名同步：通过useState存储选中的文件名，在uploadFile回调里更新状态，实时显示到span中
• 触发选择：自定义按钮的onClick事件调用原生input的click()方法，模拟用户点击原生选择框的行为

样式扩展 #

你可以继续给外层的justify-between div、span和按钮添加自定义CSS，比如调整间距、颜色、边框等，完全按照你的设计需求来就行，原生input已经被隐藏不会影响样式。

内容的提问来源于stack exchange，提问作者Paul