はじめに
自作アプリケーションを作りたい。作るなら見た目はカッコよく作りたいと思いMUIの学習を始めました。MUIは大量にUIが利用できて自由度が高いのが素晴らしいポイントです。しかし、初学者としては自由度が高すぎて実現したいUIがすぐに見つからない、見つけてもどうやって書くか忘れてまた調べる。何てことになって面倒なので備忘として便利なMUIをココに残していこうと思います。
私のような初学者の助けにもなればと思います。楽しくMUIをマスターしちゃおう！
※初心者なので情報の正確性には自信がないです。表示されればOKという気持ちで書いています。誤りやもっと良い方法がある等ありましたらコメントでご指摘いただければ幸いです
MUIの基本（逆引きだけ見てもわからないときは以下を参照）
icon
アイコンの基本的な利用方法やイメージは以下のリンク（パッケージインストールが必要です）
https://mui.com/components/icons/#main-content
iconsの検索は下のリンクから(どんなアイコンがあるのか見るだけでも面白い)
https://mui.com/components/material-icons/
Color
MUIでは色が用意されていて500とか600とか数字で指定できるので、自分で色を準備する必要はない。（もちろん自分で準備もできる）
MUIで用意されている色一覧は以下のリンク
https://mui.com/customization/color/#main-content
ファイルアップロードボタン・見た目アイコンのボタン・アイコン付きボタン・ローディングボタン等
公式のサイトにあるものをコピペすればすぐに実現できる！
公式リンク
以下のButtonコンポーネントのページに載ってます。コードの例は
https://mui.com/components/buttons/
MUI公式の見方
以下キャプチャの右下にある<>でコードを確認できます。
その隣の立方体はcodesandboxというwebサイトに飛んで実際にコードを触って動かすことができます。
ラベル付き○○
チェックボックス・ラジオボタン・テキストフィールドにラベルを付けたい。また、ラベルをクリックしてテキストフィールドにフォーカスさせたい。
イメージ
コード
<FormControlLabel
labelPlacement="end" //ラベルの開始位置を選べる
label="ラベルだよ"
control={<Checkbox name="checkboxA" color="primary" />} //controlProp の中にMUIを定義する
/>
公式リンク
FormControlLabel APIのページ
https://mui.com/api/form-control-label/#main-content
アバターアイコン
イメージ
コード
<Avatar sx={{ bgcolor: teal[400] }}> // 色はcolorsからimportして利用する
<LockOutlinedIcon /> // 好きなiconsをインポートして利用する
</Avatar>
公式リンク
Avatar のページ
https://mui.com/components/avatars/#main-content
通販のショッピングカートボタン
ヘッダーとかにあって、選択した商品がいくつあるか確認できるアイコンボタン
イメージ
コード
<IconButton>
<Badge badgeContent={4} color="primary">
<ShoppingCartIcon color="action" />
</Badge>
</IconButton>
公式リンク
Badge のページ
https://mui.com/components/badges/#main-content
文字をクリックしたら開くドロップダウン
普通のドロップダウンではなく、文字をクリックしてクリックした文字の下にドロップダウンを出したい
イメージ
コード
const [anchorEl, setAnchorEl] = useState(null);
const openMenu = Boolean(anchorEl);
const handleClick = (e) => {
setAnchorEl(e.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Typography
sx={{ mr: "20px", cursor: "pointer", color: "#616161" }}
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={openMenu ? "true" : undefined}
onClick={handleClick}
>
Categories
</Typography>
{/* ドロップダウンアイテム */}
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={openMenu}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Men</MenuItem>
<MenuItem onClick={handleClose}>Women</MenuItem>
</Menu>
)
公式リンク
Menuのページ
https://mui.com/components/menus/
=================以下記事編集用