ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

ListItemの各プロパティの解説

MUIでのListItemの扱い方の説明です。
リストの各項目を作ります。
ListItemはシンプルに表示するのみなので、実際にはListItemではなくクリックしたときに反応があるListItemButtonコンポーネントの方ををよく使うようになるでしょう。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem>
    <div>リストの項目1</div>
  </ListItem>
  <ListItem>
    <div>リストの項目2</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

alignItems

ListItemのalignItemsの使い方の説明です。
最終的に生成されるCSSのalign-itemsの設定ができます。
設定できる文字列はcenter、flex-startです。
未設定のデフォルトはcenterです。
フレックスコンテナーの位置を設定するものです。
サンプルの1つ目はcenterにしてるので高さが異なる場合は高さが小さいほうが中央になるように表示されます。
2つ目はflex-startなので高さが小さいほうが最初の方、つまり上辺に寄ります。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem alignItems="center" style={{"border":"1px solid #000"}}>
    <div style={{"width":"50px"}}>これは複数行になる</div>
    <div>(真ん中)</div>
  </ListItem>
  <ListItem alignItems="flex-start" style={{"border":"1px solid #000"}}>
    <div style={{"width":"50px"}}>これは複数行になる</div>
    <div>(上の方)</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

autoFocus

ListItemのautoFocusの使い方の説明です。
非推奨になりました。
これは使わないでください。怒られます。どうしてもこの機能を使いたい場合はListItemButtonコンポーネントでautoFocusを使ってください。

button

ListItemのbuttonの使い方の説明です。
非推奨になりました。
これは使わないでください。怒られます。どうしてもこの機能を使いたい場合はListItemButtonコンポーネントを使ってください。

children

ListItemのchildrenの使い方の説明です。
子要素を設定できます。
ノードを設定できるので文字列でなくても構いません。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem children="文字列でチルドレン" />
  <ListItem children={<div>DIVでチルドレン</div>} />
</List>
, document.getElementById('sample') 
);

classes

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

component

ListItemのcomponentの使い方の説明です。
生成する際の要素を設定できます。
ListコンポーネントはUL要素で作られます。その子要素はLI要素で作られます。その子要素のLI要素の代わりに使用する要素を指定できます。
サンプルの1つ目は生成する際にB要素を設定しているので太字で生成されます。
デフォルトでLI要素が設定されます。
サンプルではB要素を指定したのでB要素で作られていることが分かります。
デフォルトのListItemButtonはおおもとがDIVで生成されます。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem component="b" >
    <div>ボールドで太字</div>
  </ListItem>
  <ListItem>
    <div>普通の文字</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

components

ListItemのcomponentsの使い方の説明です。
省略

componentsProps

ListItemのcomponentsPropsの使い方の説明です。
省略

ContainerComponent

ListItemのContainerComponentの使い方の説明です。
非推奨になりました。
これは使わないでください。怒られます。

ContainerProps

ListItemのContainerPropsの使い方の説明です。
非推奨になりました。
これは使わないでください。怒られます。

dense

ListItemのdenseの使い方の説明です。
denseは直訳で密集です。
余裕を持った幅で表示するかの設定です。
trueにしたほうは若干上下の幅が少なくなっています。
※注意してください。ブール値を渡さなければいけないためdense="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。denseと書くだけでdense={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem dense={true} style={{"border":"1px solid #000"}}>
    <div>denseがtrue</div>
  </ListItem>
  <ListItem dense={false} style={{"border":"1px solid #000"}}>
    <div>denseがfalse</div>
  </ListItem>
  <ListItem dense style={{"border":"1px solid #000"}}>
    <div>dense(省略形)</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

disabled

ListItemのdisabledの使い方の説明です。
非推奨になりました。
これは使わないでください。怒られます。どうしてもこの機能を使いたい場合はListItemButtonコンポーネントを使ってください。

disableGutters

ListItemのdisableGuttersの使い方の説明です。
ガターです。ボウリングをするときのガターと同じです。側溝を意味します。(ボウリングでガーターと言ってると恥ずかしい人になります。気を付けましょう。ボーリングと言ってる人も恥ずかしいので気を付けましょう。それは杭で穴を掘って調査するやつです。)
左右の余白の設定です。
ブール値で設定します。
trueにすると左右の余白が無くなります。
※注意してください。ブール値を渡さなければいけないためdisableGutters="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableGuttersと書くだけでdisableGutters={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem disableGutters={true}>
    <div>disableGuttersがtrue</div>
  </ListItem>
  <ListItem disableGutters={false}>
    <div>disableGuttersがfalse</div>
  </ListItem>
  <ListItem disableGutters >
    <div>disableGutters(省略形)</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

disablePadding

ListItemのdisablePaddingの使い方の説明です。
全ての余白を削除する設定です。
ブール値で設定します。
trueにすると全ての余白が無くなります。
※注意してください。ブール値を渡さなければいけないためdisablePadding="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disablePaddingと書くだけでdisablePadding={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの最後におまけとしてdisableGuttersを表示しています。disableGuttersの方は左右の余白だけ削除され上下の余白はそのまま残っているのが分かります。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem disablePadding={true} style={{"border":"1px solid #000"}}>
    <div>disablePaddingがtrue</div>
  </ListItem>
  <ListItem disablePadding={false} style={{"border":"1px solid #000"}}>
    <div>disablePaddingがfalse</div>
  </ListItem>
  <ListItem disablePadding style={{"border":"1px solid #000"}}>
    <div>disablePadding(省略形)</div>
  </ListItem>
  <ListItem disableGutters style={{"border":"1px solid #000"}}>
    <div>おまけdisableGutters(省略形)</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

divider

ListItemのdividerの使い方の説明です。
下に薄い灰色の区切り線を付け加えます。
ブール値で設定します。
trueにすると区切り線が付きます。
※注意してください。ブール値を渡さなければいけないためdivider="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。dividerと書くだけでdivider={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem divider={true}>
    <div>dividerがtrue。この下に線がある</div>
  </ListItem>
  <ListItem divider={false}>
    <div>dividerがfalse。この下には線が無い</div>
  </ListItem>
  <ListItem divider >
    <div>divider(省略形)。この下には線がある</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

secondaryAction

ListItemのsecondaryActionの使い方の説明です。
項目のend、つまり末尾に付け加えます。
ノードを指定できるので文字列でなくても構いません。
サンプルの項目1と項目2のそれぞれの末尾(右端)に文字が表示されているのがわかります。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<List>
  <ListItem secondaryAction="末尾に文字列">
    <div>項目1</div>
  </ListItem>
  <ListItem secondaryAction={<div>末尾にノード</div>}>
    <div>項目2</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

selected

ListItemのselectedの使い方の説明です。
非推奨になりました。
これは使わないでください。怒られます。どうしてもこの機能を使いたい場合はListItemButtonコンポーネントを使ってください。

sx

ListItemのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。
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
戻る

全体目次