ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Chipの各プロパティの解説

MUIでのチップの扱い方の説明です。
ちょっとしたものを表示するチップを作成します。

avatar

Chipのavatarの使い方の説明です。
Chipの左側にアバターを表示できます。
アバターはマテリアルデザインでよく見かけるまるっこいやつです。
Avatarコンポーネントについてはこちらに移動してください。
似たような表示で左側にiconを表示できますがこのavaterと同時には使用できません。
The Chip component can not handle the avatar and the icon prop at the same time. Pick one.
と怒られます。
<Chip avatar={<Avatar>ふ</Avatar>} label="avatar"/>

children

Chipには存在しないので省略
似たようなことをしたい場合はcomponentを使用してください。

classes

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

clickable

Chipのclickableの使い方の説明です。
Chipをクリックしたらなにかしそうな雰囲気を出します。
あくまでも雰囲気を出すだけなので実際には何も処理をしません。
onClickが設定されていた場合は自動でtrueになります。
サンプルのありのほうをクリックしてみましょう。いかにも機能しそうな動きをします。
デフォルトはfalseです。
<Chip clickable={true} label="clickableあり"/>
<Chip clickable={false} label="clickableなし"/>
<Chip onClick={()=>{alert('クリックした')}} label="clickableなし、onClickあり"/>

color

Chipのcolorの使い方の説明です。
Chipの背景色を設定できます。
テーマの色を指定します。
使えるのはprimary、secondary、error、info、success、warning、そして自分で設定した色です。
デフォルトはdefaultです。
defaultはテーマのモードに依存します。
モードがライト(mode:light)の場合はgrey[100]が、モードがダーク(mode:dark)の場合grey[900]が使用されます。
<Chip color="primarylabel="primary"/>
<Chip color="secondarylabel="secondary"/>
<Chip color="errorlabel="error"/>
<Chip color="infolabel="info"/>
<Chip color="successlabel="success"/>
<Chip color="warninglabel="warning"/>
<Chip color="default" label="default"/>

component

Chipのcomponentの使い方の説明です。
このチップのおおもとを囲む要素を指定できます。
サンプルはDIV要素、SPAN要素、そしてあまりお行儀が良くありませんがB要素で囲んでみます。ブラウザによってはB要素で囲んだものは太字で表示されているはずです。
<Chip component="div" label="div"/>
<Chip component="span" label="span"/>
<Chip component="b" label="b"/>

deleteIcon

ChipのdeleteIconの使い方の説明です。
削除ボタンのアイコンを設定できます。
onDeleteで削除処理が設定されているときだけ表示されます。
デフォルトは×ボタンです。
サンプルの1つ目はデフォルトの×ボタンです。
2つ目は×ボタンからゴミ箱アイコンに変更しています。
3つ目はdeleteIconは設定していますが、onDeleteが無いのでアイコンが表示されません。
const DeleteIcon = createSvgIcon(<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />,'DeleteIcon');
ReactDOM.render(
<div>
<Chip onDelete={()=>{alert('削除処理未実装')}} label="デフォルト onDeleteあり"/>
<Chip deleteIcon={<DeleteIcon />} onDelete={()=>{alert('削除処理未実装')}} label="ゴミ箱アイコン onDeleteあり"/>
<Chip deleteIcon={<DeleteIcon />} label="deleteIconあり、onDeleteなし"/>
</div>
, document.getElementById('sample')
);

disabled

Chipのdisabledの使い方の説明です。
Chipを無効化します。
無効化になると全体的に薄い色になります。
<Chip disabled={true} label="disabledあり"/>
<Chip disabled={false} label="disabledなし"/>
<Chip disabled={true} color="primarylabel="primary色 disabledあり"/>
<Chip disabled={false} color="primarylabel="primary色 disabledなし"/>

icon

Chipのiconの使い方の説明です。
iconでChipの左端に表示するアイコンを設定できます。
アイコンと書いていますが文字でも構いません。
似たような表示で左側にavatarを表示できますがこのiconと同時には使用できません。
The Chip component can not handle the avatar and the icon prop at the same time. Pick one.
と怒られます。
const NoteIcon = createSvgIcon(<path d="m22 10-6-6H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99l16-.01c1.1 0 2-.89 2-1.99v-8zm-7-4.5 5.5 5.5H15V5.5z" />, 'Note');
const TukuttaDiv = () => <div style={{"marginLeft":"5px","marginRight":"-6px"}}>ふ</div>;
ReactDOM.render(
<div>
<Chip icon={<NoteIcon />} label="SVGのicon"/>
<Chip icon={<TukuttaDiv />} label="文字のicon"/>
</div>
, document.getElementById('sample')
);

label

Chipのlabelの使い方の説明です。
チップで表示する文字を設定します。
ノードを設定できるので文字でなくても構いません。
サンプルの2つ目のChipは赤文字の太字のSPAN要素を表示しています。
const TukuttaSpan = () => <span style={{"color":"#ff0000","fontWeight":"bold"}}>作ったSPANのノードを表示</span>;
ReactDOM.render(
<div>
<Chip label="ここに書いた文字が表示される" />
<Chip label={<TukuttaSpan />} />
</div>
, document.getElementById('sample')
);

onDelete

ChipのonDeleteの使い方の説明です。
チップの右端に表示される×ボタンが押された際に処理する関数を設定します。
チップの右端の×ボタンはdeleteIconで表示するアイコンを変更ができます。
<Chip onDelete={()=>{alert('何か削除処理を実装する')}} label="onDelete"/>

size

Chipのsizeの使い方の説明です。
small、medium、そして定義した文字列が使えます。
<Chip size="smalllabel="small"/>
<Chip size="mediumlabel="medium"/>

sx

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

variant

Chipのvariantの使い方の説明です。
バリアントで見た目を変えられます。
filled、outlined、そして定義した文字列が使えます。
filledは背景色有りです。outlinedは枠線のみです。
デフォルトはfilledです。
極端な話variantはCSSの記述の違いなのでCSSを独自定義しそれをここで指定することができてます。説明のために無理やりしていますがこのやり方はあまりよろしくありません。
<Chip label="デフォルト、variant未設定"/>
<Chip variant="filledlabel="filled"/>
<Chip variant="outlinedlabel="outlined"/>
<Chip variant="filledcolor="primarylabel="primary色のfilled"/>
<Chip variant="outlinedcolor="primarylabel="primary色のoutlined"/>
<Chip variant="tukuttaStyle" label="tukuttaStyleでvariant"/>
<style>
.MuiChip-tukuttaStyle {
  border : 10px solid #ff0000;
}
</style>
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
戻る

全体目次