ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Dividerの各プロパティの解説

MUIでのDividerの扱い方の説明です。
区切り線です。
MUIの場合は薄い灰色の線が引かれます。よくみるとこの行のすぐ下に薄い灰色の線が引かれているのがわかります。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<Divider/>
, document.getElementById('sample')
);

absolute

Dividerのabsoluteの使い方の説明です。
CSSのpositionをabsoluteにするかの設定です。
trueにするとabsoluteになります。
※注意してください。ブール値を渡さなければいけないためabsolute="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。absoluteと書くだけでabsolute={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルはtrueにしたので直近の親でpositionがrelativeの位置が基準になりそのすぐ下に配置されます。つまり「この下にくる」の直下です。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div style={{"position":"relative"}}>
  <Divider absolute={true} />
  <div>この下にくる</div>
</div>
, document.getElementById('sample')
);

children

Dividerのchildrenの使い方の説明です。
Dividerは線上に文字などを表示できます。
その表示するものを設定できます。
ノードを指定できるので文字でなくてもかまいません。
サンプルの1つ目は単純に文字を表示しています。
2つ目は表示するものをノードで設定しています。
サンプルではSPAN要素で赤文字の「チルドレン」を作って指定しています。
const Divider = MaterialUI.Divider;
const TukuttaSpan = <span style={{"color":"red"}}>赤字のノードで表示</span>;
ReactDOM.render(
<div>
  <Divider>線上に文字を表示できる</Divider>
  <Divider children={TukuttaSpan} />
</div>
, document.getElementById('sample')
);

classes

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

component

Dividerのcomponentの使い方の説明です。
Dividerの区切り線は通常はHR要素を使って作られます。
ただし線上に文字を表示する場合はHR要素ではなくDIV要素で作られます。
そのDIV要素の代わりに使うおおもとの要素を指定できます。
デフォルトのDividerはおおもとがDIVで生成されます。
サンプルではB要素を指定したのでB要素で作られていることが分かります。
DividerのおおもとがB要素で生成されます
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <Divider>これは標準の太さ</Divider>
  <Divider component="b">これは太字になる</Divider>
</div>
, document.getElementById('sample')
);
ちなみに子要素のノードを表示せずにこのcomponentを使用すると表示されなくなります。
こんな間抜けな使い方は想定していないのでしょう。B要素に変わったにもかかわらず内部ではHR要素を前提として処理するため結果的に表示されなくなります。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <div>この下は表示されるが</div>
  <Divider />
  <div>この下は表示されない</div>
  <Divider component="b" />
  <div>本来この上に区切り線があるはず</div>
</div>
, document.getElementById('sample')
);

flexItem

DividerのflexItemの使い方の説明です。
CSSのdisplayのflexで横一列に表示しその区切りとしてDividerを使うときに使用します。
これを設定しないとflexの中では高さを0にするために表示されなくなります。
Dividerの縦の区切り線がなぜか表示されない!というときに使ってください。
※注意してください。ブール値を渡さなければいけないためflexItem="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。flexItemと書くだけでflexItem={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの1つ目はtrueに設定しているので1と2の間にとてもわかりづらいですが薄い灰色の縦線が表示されています。
2つ目は1と2の間にDividerが存在はするのですが高さが0のために表示されていません。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div>
<div style={{"display":"flex"}}>
  <div>1</div>
  <Divider flexItem={true}  orientation="vertical" />
  <div>2</div>
</div>
<div style={{"display":"flex"}}>
  <div>1</div>
  <Divider flexItem={false}  orientation="vertical" />
  <div>2</div>
</div>
</div>
, document.getElementById('sample')
);

light

Dividerのlightの使い方の説明です。
Dividerは本来黒色の線を透明度を上げることにより薄い灰色に表示しています。
lightはその透明度をほんの少し微妙に上げます。
微妙過ぎて人によっては判別できないでしょう。
具体的には通常はrgba(0, 0, 0, 0.12)で、それがrgba(0, 0, 0, 0.08)まで透明度が上がります。
rgbaの最後のaのAlphaは1で真っ黒。0で透明度100%の何も表示されない状態になります。
0.12が0.08に微妙に変化しています。
※注意してください。ブール値を渡さなければいけないためlight="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。lightと書くだけでlight={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div>
  <div>trueなので下の線は2番目の通常の線よりも若干薄くなっている</div>
  <Divider light={true} />
  <div>falseでこの下の線が通常</div>
  <Divider light={false} />
</div>
, document.getElementById('sample')
);
ちなみにこの設定、子要素のノードを設定すると機能しなくなります。
下のサンプルも色が微妙に変わらなければいけないのに上下とも同じ濃さです。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <Divider light={true}>0.08のはずだが0.12のまま変わらない</Divider>
  <Divider light={false}>0.12</Divider>
</div>
, document.getElementById('sample')
);

orientation

Dividerのorientationの使い方の説明です。
縦区切りか、横区切りかを設定できます。
設定できる値はhorizontalとverticalです。
未設定のデフォルトはhorizontalです。
verticalを使用するときはだいたいdisplayのflexで横一列に表示する際の区切りが多いでしょう、その際にはflexItemも使用しましょう。そうしないと高さ0になってしまい縦区切り線が見えなくなります。
サンプルの1つ目はのhorizontalで横に長い区切り線が表示されています。
サンプルの2つ目はのverticalで1と2の間に縦の短い区切り線が表示されています。2と3の間にもDividerがあるのですがflexItemを設定し忘れているため高さが0になり結果的に表示されていません。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <Divider orientation="horizontal" />
  <div style={{"display":"flex"}}>
    <div>1</div>
    <Divider orientation="verticalflexItem={true} />
    <div>2</div>
    <Divider orientation="vertical" />
    <div>3</div>
  </div>
</div>
, document.getElementById('sample')
);

sx

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

textAlign

DividerのtextAlignの使い方の説明です。
Dividerは子要素を設定することにより線上に文字などのノードを表示できます。
textAlignでその表示位置を調整できます。
設定できる文字列はleft、center、rightの3つです。
未設定のデフォルトはcenterです。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <Divider textAlign="left">左側</Divider>
  <Divider textAlign="center">中央(デフォルト)</Divider>
  <Divider textAlign="right">右側</Divider>
</div>
, document.getElementById('sample')
);

variant

Dividerのvariantの使い方の説明です。
表示する形状を設定できます。
設定できる文字列はfullWidth、inset、middleの3みつです。
未設定のデフォルトはfullWidthです。
fullWidthは両側いっぱいに広げた線です。
insetは左側が少し欠けた線です。どうやら小見出しなどに使用するのを想定しているようです。
middleは両端が短い線です。
ちなみに縦線区切りでinsetを使用すると妙な空間ができます。これはinsetが内部でmargin-leftを設定しているためにその分だけ左側に余白ができるせいです。サンプルの縦線区切りの2と3の間がそれにあたります。公式のサンプルを見るとsxを使用しHR要素にmxを設定し強制的に空間を短くしているようです。mxについてはsxの解説の「marginとpaddingの省略形の別名(エイリアス)」を見てください。
const Divider = MaterialUI.Divider;
ReactDOM.render(
<div>
  <div>fullWidth</div>
  <Divider variant="fullWidth" />
  <div>inset</div>
  <Divider variant="inset" />
  <div>middle</div>
  <Divider variant="middle" />
  <div style={{"margin-top":"1rem"}}>文字列が入った状態だと下のようになる</div>
  <Divider variant="fullWidth">fullWidth</Divider>
  <Divider variant="inset">inset</Divider>
  <Divider variant="middle">middle</Divider>
  <div style={{"margin-top":"1rem"}}>縦線区切り</div>
  <div style={{"display":"flex"}}>
    <div>1</div>
    <Divider variant="fullWidth" orientation="verticalflexItem={true} />
    <div>2</div>
    <Divider variant="inset" orientation="verticalflexItem={true} />
    <div>3</div>
    <Divider variant="middle" orientation="verticalflexItem={true} />
    <div>4</div>
  </div>
</div>
, document.getElementById('sample')
);
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
戻る

全体目次