文件域美化方式

通常情况下，我们直接给 <input type="file" />添加样式会受到浏览器自身限制，并不会有很好的效果。不过，我们可以使用一种方法能够完全自定义样式，还能保证文件上传功能正常。

这个办法就是隐藏原生的文件输入框，并使用 label 标签和样式化的元素（如 div 或 button）创建一个自定义的上传按钮。

下面是一个基本例子:

import './App.css';  // 导入自定义样式

function App() {
  const handleFileUpload = event => {
    const file = event.target.files[0];
    console.log(file); // 在这里添加处理文件的代码
  };

  return (
    <div className="App">
      <input
        id="fileUploadButton"             // id用来连接label和input
        className="file-upload-input"     // class用来在css中设置display: none;
        type="file"
        onChange={handleFileUpload}
      />
      <label className="custom-file-upload-button" htmlFor="fileUploadButton">
        Upload File
      </label>
    </div>
  );
}

export default App;

然后在 App.css 文件中添加以下样式：

  display: none;  // 隐藏原生input
}

.custom-file-upload-button {
  padding: 10px;
  color: white;
  background-color: blue;
  display: inline-block;
  cursor: pointer;
}