使用 Material UI 样式化的文件上传组件

要在 React 中将原生文件选择器设置为 Material UI 按钮的样式，请将按钮渲染为标签，并在其中放入隐藏的 <input type="file">。点击该标签会打开浏览器的文件选择器。此做法只会选择文件，不会将文件发送到服务器。

在 React 中使用 Material UI 上传文件

在 React 组件中使用以下模式：

<Button variant="contained" component="label">Choose file <input type="file" hidden /></Button>

Button 提供 Material UI 样式，而 component="label" 会将其根元素设为标签。隐藏的原生输入框仍负责打开文件选择器。由于输入框嵌套在标签中，点击可见的按钮就会激活输入框，无须另设点击处理器。hidden 属性只会隐藏输入框本身的外观，不会移除文件选择功能。

将这段 JSX 添加到已经导入适用 Button 的组件中。Material UI 的导入路径取决于项目安装的主版本，请使用该版本文档中说明的路径，不要假设所有项目都采用相同设置。这段代码展示的是组件模式，并非完整应用；由于提供的运行时证据不包含 React 或 Material UI 测试环境，此处没有执行该示例。

用户选择文件后，浏览器会通过输入框的 files 属性提供所选文件。若要响应文件选择，可添加 onChange 处理器，并从该属性读取所选的 File。具体处理方式取决于应用需求，例如显示文件名、验证文件，或为传输做准备。仅选择文件并不会上传文件。要将文件发送到服务器，还需要编写额外的应用逻辑，例如使用 FormData 构造请求并将其提交到上传端点。

你可以修改按钮标签、变体或其他受支持的 Button 属性，以适配界面。如果要添加图标，请使用与项目 Material UI 主版本兼容的图标包和导入路径。此示例仅介绍标签与隐藏输入框的做法，不假定特定项目设置，也不提供上传服务代码。