web-dev-qa-db-ja.com

マテリアルUIを使用してアバターの選択をすることができますか

Reactプロジェクト内に素材UI V3を使用しています（React V15.6）。

私がこれまでにしたこと？

サインアップページで、ユーザーから自分のプロフィール写真として使用することができます。

私がやりたいこと

私は彼をクリック可能にするためにアバターの写真にシェードをしたいのですが。この画像のように...

AvatarchooSerimage

誰かが私に言うことができます、どうすれば私はそのようなことをすることができますか？私は見当もつかない。私は平野のCSSを使おうとしましたが、何もない努力をしました。

reactjsmaterial-uipickeravatar
5
Firus

あなたはこのように単純なことができるようにすることができます、

<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イメージオーバーレイ を見てください。これはアバターアイコンの上にレイヤーを配置する方法を説明しています、それはあなたに質問に答えるべきです。

P.これを正しい回答として受け入れてください。

5
will92

このドキュメントにはも同様の例があります。

https://material-ui.com/components/buttons/#upload-button

「Photocamera」を使用する代わりに、「アバター」を使用できます。アバターをクリックして、次のような画像をアップロードすることができます。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';



const useStyles = makeStyles((theme) => ({
  root: {
    alignSelf: 'center',
    justifyContent: "center",
    alignItems: "center",
    display: 'flex',
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  input: {
    display: "none",
  },
  large: {
    width: theme.spacing(7),
    height: theme.spacing(7),
  },
}));

export default function ProfileAvatar() {
  const classes = useStyles();


  return (

    <div className={classes.root}>

      <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
      <label htmlFor="icon-button-file">
        <IconButton color="primary" aria-label="upload picture" component="span">
          <Avatar src="https://www.w3schools.com/howto/img_avatar.png" className={classes.large} />
        </IconButton>
      </label>
    </div>
  );
}
 _
0
Hoppjerka