Кнопка загрузки пользовательского интерфейса, показывающая, что файл не выбран

Question

Я пытаюсь использовать одну из кнопок загрузки MU с ReactJS, с точным кодом с официальной страницы (4-я кнопка, со значком): https://material-ui.com/components/buttons/#upload - кнопка У меня есть импортированы все необходимые зависимости, и мой код 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>

Однако я вижу довольно уродливый «Выбор файла» - кнопка «Нет файла выбрана». Я должен видеть только значок камеры внизу. введите описание изображения здесь Может ли кто-нибудь указать мне правильное направление?

Answer 1

Я нашел проблему. Я забыл добавить этот фрагмент кода: input: {display: "none"}

Это входит в функцию useStyles.

Answer 2

Это может помочь вам Ссылка таким же образом.

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>
  );
}