Question

我正在尝试使用带有ReactJS的MU上传按钮之一，以及官方页面上的确切代码（第四个按钮，带有图标）：https://material-ui.com/components/buttons/#upload-button 我已经导入了所有必需的依赖项，此按钮的React代码如下：

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import PhotoCamera from "@material-ui/icons/PhotoCamera";

import "./SignUp.css";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

function SignUp() {
  const classes = useStyles();

return (
      <label htmlFor="icon-button-file">
            <IconButton
              color="primary"
              aria-label="upload picture"
              component="span"
            >
              <PhotoCamera />
            </IconButton>
        </label>
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但是，我看到的是这个丑陋的“选择文件”-没有选择文件按钮。我应该只会在底部看到相机图标。 enter image description here 有人能指出我正确的方向吗？

Answer 1

我发现了问题。我忘了添加这段代码：输入：{ 显示：“无” }

这进入useStyles函数。

Answer 2

这可能以同样的方式Link为您提供帮助。

import React from "react";
import "./styles.css";
import IconButton from "@material-ui/core/IconButton";
import PhotoCamera from "@material-ui/icons/PhotoCamera";

export default function App() {
  return (
    <div className="App">
      <IconButton>
        <PhotoCamera />
      </IconButton>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

材质UI上传按钮显示未选择文件

2 个答案: