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

许多库允许你为 React 应用程序构建用户界面。Material UI 是最受欢迎且可以说是最安全的选项之一。

该库提供自定义组件，例如按钮、文本字段和强大的 API，允许你自定义 UI 组件的外观和行为。

只有一个问题：Material UI 不包含任何用于上传文件的自定义组件。此功能通常是必需的，尤其是当你正在开发涉及共享照片和其他媒体的 React 应用程序时。

React 中 Material UI 中的文件上传

使用 Material UI 样式创建迷人的文件上传组件的一种方法是从常规的 HTML 元素开始。

让我们看一下实际的代码：

export default function App() {
  return (
    <div className="App">
      <input type="file" />
    </div>
  );
}

正如你在现场 codesandbox 演示中看到的，它看起来并不迷人。

这就是 Material UI 组件的用武之地。UI 库包含现有样式，你可以使用这些样式来改善 <input> 元素的外观。

首先，你必须导入一个 <Button> 自定义组件并将其包裹在你不吸引人的文件输入元素周围。

此时，我们的代码应如下所示：

export default function App() {
  return (
    <div className="App">
      <Button variant="contained" component="label" color="primary">
        {" "}
        Upload a file
        <input type="file" hidden />
      </Button>
    </div>
  );
}

在这种情况下，我们的 <Button> 组件已经看起来好多了。使用 variant 属性，我们指定了按钮的类型。

Material UI 中的 component 属性允许我们识别用于根节点的 HTML 元素。换句话说，通过给它一个 label 的值，我们确保 Button 组件将被编译为 HTML 中的 label 元素。

事实上，如果你检查元素以查看 HTML 结构，你会发现它是一个 <label> 元素。

最后，我们给我们的按钮一个默认的蓝色。

为了保留底层 <input> HTML 元素的功能但隐藏其不吸引人的视觉效果，我们为其分配了 hidden 属性。这样，当用户点击一个按钮时，浏览器会提示他们选择一个文件。

它是 Material UI 中自定义 Button 组件的基本样式。请查看其 API 文档 以了解有关自定义可能性的更多信息。

例如，你可以使用 Material UI 库中的一个图标来使你的按钮更具吸引力和直观性。

export default function App() {
  return (
    <div className="App">
      <Button variant="contained" component="label" color="primary">
        {" "}
        <AddIcon/> Upload a file
        <input type="file" hidden />
      </Button>
    </div>
  );
}

你可以在 codesandbox 上自行测试。