如何使用 Material UI 制作头像选择器

Question

我在 React 项目 (react v15.6) 中使用 Material UI v3。

到目前为止我做了什么？

在注册页面中，我可以从用户那里获得一张图片，用作他/她的个人资料照片。

我想做的事

我想在头像照片上添加一个阴影，以向他展示可点击的内容。喜欢这张图...

头像选择器图片

有人可以告诉我，我怎么能做这样的事情？我没有线索。我尝试使用纯 CSS，但付出了很多努力却一无所获。

Answer 1

你可以做一些像这样简单的事情，

<IconButton>
 <Avatar 
  src="/images/example.jpg" 
  style={{
    margin: "10px",
    width: "60px",
    height: "60px",
  }} 
 />
</IconButton>

这允许您拥有一个可点击的头像。

但既然你也把它用作文件输入，也许你可以做这样的事情，

<input
 accept="image/*"
 className={classes.input}
 id="contained-button-file"
 multiple
 type="file"
/>
<label htmlFor="contained-button-file">
  <IconButton>
   <Avatar 
     src="/images/example.jpg" 
     style={{
      margin: "10px",
      width: "60px",
      height: "60px",
     }} 
    />
  </IconButton>
</label>

要为“编辑”进行叠加，请查看css image overlay。这解释了如何在头像图标的顶部放置一个图层，它应该可以回答您的问题。

PS 如果它回答了您的问题，请接受此为正确答案，谢谢。