在 React 中仅使用图像构建按钮

Question

我花了两天时间试图找出如何在 React 中创建带有图像的按钮，但到目前为止无法实现如下所示。

我正在尝试实现的屏幕截图 -- 文件和文件夹有可点击的按钮：

我愿意使用 MUI，如果这可以使用普通的 React 来完成，我会更好。如果有人能告诉我如何做到这一点，我将不胜感激。

Answer 1

使用此代码

import Button from '@mui/material/Button';

export default function App() {
  return (
    <>
    <Button variant="text" size="small" style={{display: "flex", flexDirection: "column"}}>
      <img src="https://www.tenforums.com/geek/gars/images/2/types/thumb_14486407500Folder.png" width="100" alt="folder"/>
      <label>Pictures</label>
    </Button>
    </>
  );
}

Answer 2

你也可以做类似的事情

export default function App() {
  return (
    <div className="App">
      <img
        src="https://www.tenforums.com/geek/gars/images/2/types/thumb_14486407500Folder.png"
        alt=""
        onClick={handleClick}
        id="secret_folder"
      />
    </div>
  );

  function handleClick(e) {
    if (e.target.id === "secret_folder") {
      console.log("you clicked");
    }
  }
}

在 React 中仅使用图像构建按钮

Building a button only with image in React

reactjs

material-ui

chakra-ui