ふかしぎのReactさんぷるず

Avatarの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/02/15
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.4.1 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Avatar } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Avatar  = MaterialUI.Avatar;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

Avatarの各プロパティの解説

MUIでのアバターの扱い方の説明です。
あのまるっこい画像です。
ちなみにAvatarGroupコンポーネントを使うと複数のAvaterをグループ化していい感じにかっこよく表示できます。
このページで使うサンプルのアバターの元画像はこれです。

alt

Avatarのaltの使い方の説明です。
最終的に生成されるIMG要素のalt属性を設定します。
表示上ではわかりませんが開発ツールで生成されたHTMLを見れば
<img alt="altです" src="./fukasigi_logo.png" class="MuiAvatar-img css-1pqm26d-MuiAvatar-img">
と生成されたIMG要素でALT属性が設定されています。
<Avatar alt="altです" src="./fukasigi_logo.png" />

children

Avatarのchildrenの使い方の説明です。
srcの代わりにchildrenを使って表示するノードを指定できます。
サンプルの1つ目はDIV要素を表示しています。
2つ目はIMGで画像が押しつぶされたように表示する設定ています。
AvatarのsrcではなくIMGを直接表示しているので元の四角い画像がそのまま押しつぶされて表示されています。
<Avatar children={<div>DIV</div>} />
<Avatar children={<img src="./fukasigi_logo.png" style={{"width":"100%","height":"50%"}} />} />

classes

Avatarのclassesの使い方の説明です。
CSSの設定を上書きします。

component

Avatarのcomponentの使い方の説明です。
Avatarを表示する際のおおもとの要素を設定できます。
サンプルの1つ目はDIV要素を指定しています。
2つ目はB要素を指定しているのでブラウザーによっては太字で表示されているはずです。
<Avatar component="div" children={<div>ABC</div>} />
<Avatar component="b" children={<div>ABC</div>} />

imgProps

AvatarのimgPropsの使い方の説明です。
最終的に生成されるIMG要素の属性を指定できます。
サンプルはwidthとheightを指定していますがMUI側のCSSで100%と上書きされるので意味がなくなっています。あとスタイルで枠線を赤くしています。
生成されたHTMLをみるとしっかりと属性が出力されています。
<img src="./fukasigi_logo.png" class="MuiAvatar-img css-1pqm26d-MuiAvatar-img" width="10px" height="10px" style="border: 5px solid rgb(255, 0, 0);">
<Avatar imgProps={{"width":"10px","height":"10px","style":{"border":"5px solid #ff0000"}}} src="./fukasigi_logo.png" />

sizes

Avatarのsizesの使い方の説明です。
最終的に生成されるIMG要素のsizesを設定できます。
srcSetと一緒に使わないと意味がないのでsrcSetも同時に設定しましょう。
とはいえMUI側のCSSで100%と上書きされるので意味がなくなっています。
<img srcset="./fukasigi_logo.png 64w" sizes="1vw" class="MuiAvatar-img css-1pqm26d-MuiAvatar-img">
<Avatar sizes="1vw" srcSet="./fukasigi_logo.png 64w" />

src

Avatarのsrcの使い方の説明です。
最終的に生成されるIMG要素のsrc属性を指定できます。
<Avatar src="./fukasigi_logo.png" />

srcSet

AvatarのsrcSetの使い方の説明です。
最終的に生成されるIMG要素のsrcsetを設定できます。
sizesと一緒に使わないと意味がないのでsizesも同時に設定しましょう。
とはいえMUI側のCSSで100%と上書きされるので意味がなくなっています。
<img srcset="./fukasigi_logo.png 64w" sizes="1vw" class="MuiAvatar-img css-1pqm26d-MuiAvatar-img">
何の嫌がらせか知りませんがimgはsrcsetですがこちらはsrcSetです。
Setの先頭を大文字にしないと機能しません。
サンプルの2つ目はsrcSetと書かなければいけないところを全部小文字のsrcsetと書いてしまっているので機能していません。
<Avatar sizes="1vw" srcSet="./fukasigi_logo.png 64w" />
<Avatar sizes="1vw" srcset="./fukasigi_logo.png 64w" />

sx

Avatarのsxの使い方の説明です。が他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

variant

Avatarのvariantの使い方の説明です。
Avatarの外形を設定します。
使えるのはcircular、rounded、square、そして自分で設定した文字列です。
circularは丸く
roundedは四隅に少し丸みをつける
squareは四角
デフォルトはcircularです。
<Avatar variant="circular" />
<Avatar variant="rounded"/>
<Avatar variant="square"  />
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次