ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

ListItemTextの各プロパティの解説

MUIでのListItemTextの扱い方の説明です。
リストを作るときの項目の文字を設定します。
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText>項目</ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

children

ListItemTextのchildrenの使い方の説明です。
表示する文字を設定できます。
ノードを指定できるので文字列でなくてもかまいません。
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText children="項目(文字列)"></ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText children={<div>項目(ノード)</div>}></ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

classes

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

disableTypography

ListItemTextのdisableTypographyの使い方の説明です。
通常ListItemTextコンポーネントの中身の文字はTypographyコンポーネントで囲まれます。
しかしdisableTypographyでそれを制御できます。
trueにするとTypographyコンポーネントが適用されません。
そしてtrueの場合はprimaryTypographyPropssecondaryTypographyPropsの設定は無効になります。
※注意してください。ブール値を渡さなければいけないためdisableTypography="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableTypographyと書くだけでdisableTypography={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
ListItemTextの中身でTypographyが使用される
false(デフォルト設定)の場合はTypographyコンポーネントが適用されSPAN要素で囲まれているのがわかります。
ListItemTextの中身でTypographyが使用されない
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText disableTypography={true}>項目(true)</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText disableTypography={false}>項目(false)</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText disableTypography >項目(省略形)</ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

inset

ListItemTextのinsetの使い方の説明です。
インデントをするかの設定です。
trueにすると有効になり文字が少し右側に移動します。
これはアイコンやアバターが無い項目とあるの項目をそろえる場合に使います。
※注意してください。ブール値を渡さなければいけないためinset="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。insetと書くだけでinset={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
const ListItemAvatar  = MaterialUI.ListItemAvatar;
const Avatar = MaterialUI.Avatar;
const ListItemIcon = MaterialUI.ListItemIcon;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText inset={true}>項目(true)</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText inset={false}>項目(false)</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText inset >項目(省略形)</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText inset={true}>アバター、アイコンなし(揃う)。insetはtrue</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemAvatar><Avatar src="./fukasigi_logo.png" /></ListItemAvatar>
    <ListItemText>アバターあり(揃う)。insetは未設定のfalse</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemIcon><TukuttaIcon /></ListItemIcon>
    <ListItemText>アイコンあり(揃う)。insetは未設定のfalse</ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

primary

ListItemTextのprimaryの使い方の説明です。
表示する文字を設定できます。
ノードを指定できるので文字列でなくてもかまいません。
primaryといわれるとテーマのprimaryと関係ありそうに見えますが無関係です。
primaryとついているのはこれとは別にsecondaryという文字列の設定があるからです。
名称をmainTextとかfirstTextなどにしてくれたら日本人としてはもっとわかりやすかったと思います。
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText primary="項目プライマリー文字列"></ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText primary={<div>項目プライマリーノード</div>}></ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

primaryTypographyProps

ListItemTextのprimaryTypographyPropsの使い方の説明です。
通常はListItemTextの中の文字はTypographyコンポーネントが適用されます。そのTypographyコンポーネントへ渡すプロパティを設定できます。
primaryのTypographyPropsという名称ですが、primaryで指定した文字列ではなく直接書いた文字列にも適用されます。
内部で使用するTypographyコンポーネントのcomponentをSPAN要素にしているので強制的にSPAN要素で囲まれます
disableTypographyをtrueにすることによりTypographyコンポーネントの適用させないようにできます。その場合この項目は無意味になります。
サンプルではTypographyのvariantをh4に指定したので通常より文字が大きくなっています。
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText primary="項目プライマリー文字列" primaryTypographyProps={{"variant":"h4"}}></ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText primaryTypographyProps={{"variant":"h4"}}>項目直接文字列</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText disableTypography={true} primaryTypographyProps={{"variant":"h4"}}>disableTypographyをtrueにしたのでこの文字の大きさは通常のまま</ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

secondary

ListItemTextのsecondaryの使い方の説明です。
項目の下に注意書きのようなサブ項目を付け加えるときに使用します。
項目のすぐ下に少し薄い色で少し小さめの文字で表示されます。
secondaryとついているのはこれとは別にprimaryという文字列の設定があるからです。
subTextとかsecondTextなどにしてくれたら日本人としてはもっとわかりやすかったと思います。
disableTypographyがtrueの場合にはTypographyコンポーネントが適用されないため、primaryとsecondaryの文字列がつながって表示されてしまいます。使ってはいけません。
disableTypographyをtrueにした場合はsecondaryはつかってはいけない
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText primary="項目プライマリー文字列" secondary="ここにセカンダリー文字列"></ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText secondary="ここにセカンダリー文字列">項目直接文字列</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText disableTypography={true} secondary="ここにセカンダリー文字列" secondaryTypographyProps={{"variant":"h4"}}>disableTypographyをtrueだとただの文字列の羅列になるのでこのすぐ後ろにセカンダリー文字列が来てしまう。</ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

secondaryTypographyProps

ListItemTextのsecondaryTypographyPropsの使い方の説明です。
通常はListItemTextの中の文字はTypographyコンポーネントが適用されます。そのTypographyコンポーネントへ渡すプロパティを設定できます。
disableTypographyをtrueにすることによりTypographyコンポーネントの適用させないようにできます。その場合にはTypographyコンポーネントが適用されない影響でprimaryとsecondaryの文字列がつながって表示されてしまいます。使ってはいけません。
disableTypographyをtrueにした場合はsecondaryはつかってはいけない
サンプルではTypographyのvariantをsubtitle1に指定したのでデフォルトにテーマの設定によりH6要素が適用されています。
TypographyコンポーネントによりH6要素が適用されている
const List = MaterialUI.List;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemText secondaryTypographyProps={{"variant":"subtitle1"}} secondary="ここにsecondary文字列">項目プライマリー</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemText disableTypography={true} secondaryTypographyProps={{"variant":"subtitle1"}} secondary="ここにセカンダリー文字列">disableTypographyをtrueだとただの文字列の羅列になるのでこのすぐ後ろにセカンダリー文字列が来てしまう。</ListItemText>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

sx

ListItemTextの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
戻る

全体目次