ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Buttonの各プロパティの解説

MUIでのボタンの扱い方の説明です。
Buttonでボタンを作成します。
<Button variant="contained">ボタンです</Button>

color

ボタンの色設定はcolorで行います。
使えるのはprimary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはprimaryになります。
テーマカラーを設定していない場合はデフォルトの色がprimaryやsecondaryに自動的に設定されます。
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
ReactDOM.render(
<ThemeProvider theme={tukuttaTheme}>
<Button color="primaryvariant="contained">primary</Button>
<Button color="secondaryvariant="contained">secondary</Button>
<Button color="successvariant="contained">success</Button>
<Button color="errorvariant="contained">error</Button>
<Button color="infovariant="contained">info</Button>
<Button color="warningvariant="contained">warning</Button>
<Button color="tukuttaIro" variant="contained">自分で作った色</Button>
<Button variant="contained">未設定</Button>
</ThemeProvider>
, document.getElementById('sample1')
);

variant

ボタンの形状はvariantで変更します。
通常のcontained、枠線だけのoutlined、なにもないtextがあります。
未設定のデフォルトはtextです。
ReactDOM.render(
  <div>
  <Button variant="contained">contained</Button>
  <Button variant="outlined">outlined</Button>
  <Button variant="text">text</Button>
  <Button>未設定</Button>
  </div>
, document.getElementById('sample2')
);

size

ボタンの大きさはsizeで変更します。
小さいsmall、標準medium、大きいlargeがあります。
未設定のデフォルトはmediumです。
ReactDOM.render(
<div>
<Button size="smallvariant="contained">small</Button>
<Button size="mediumvariant="contained">medium</Button>
<Button size="largevariant="contained">large</Button>
<Button variant="contained">未設定</Button>
</div>
, document.getElementById('sample3')
);

fullWidth

fullWidthをtrueに設定すると横幅いっぱいに広げます。
ReactDOM.render(
<Button fullWidth={true} variant="contained">横幅一杯 fullWidth={'{'}true{'}'}</Button>
, document.getElementById('sample4')
);
);
省略してfullWidthだけでも機能します。
ReactDOM.render(
<Button fullWidth variant="contained">横幅一杯 fullWidth</Button>
, document.getElementById('sample4_2')
);
);
※注意してください。ブール値を渡さなければいけないためfullWidth="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。

disabled

ボタンを不使用にするにはdisabledをtrueに設定します。
ReactDOM.render(
<Button disabled={true} variant="contained">不使用 disabled={'{'}true{'}'}</Button>
, document.getElementById('sample5')
);
);
省略してdisabledだけでも機能します。
ReactDOM.render(
<Button disabled variant="contained">不使用 disabled</Button>
, document.getElementById('sample5_2')
);
);
※注意してください。ブール値を渡さなければいけないためdisabled="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
たまたま正常に動いているだけでdisabled="true111"、disabled="false"、disabled="1"でもブール値はtrue扱いになります。

disableElevation

影を無くし立体化をオフにします。のっぺりした平面っぽくします。
とてもわかりづらいですが影が無くなっているので立体的では無くなっています。
標準と見比べて違いを確認してください。
ReactDOM.render(
<div>
  <Button disableElevation={true} variant="contained">影なし</Button>
  <Button disableElevation={false} variant="contained">標準</Button>
</div>
, document.getElementById('sample6')
);
);
※注意してください。ブール値を渡さなければいけないためdisableElevation="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。

disableFocusRipple

キーボードで移動しフォーカスした際の波模様の効果を無くします。
キーボードのTabキーを押して違いを確認してください。
disableFocusRippleをtrueにした方はタブキーで移動した際に波模様のアニメーションが無くなっています。
シフトキー+タブキーで前に戻れます。シフトキー+タブキーとタブキーを繰り返して移動した際の違いを確認できます。
ReactDOM.render(
<div>
<Button disableFocusRipple={false} variant="containedtabIndex="1">波効果あり</Button>
<Button disableFocusRipple={true}  variant="containedtabIndex="2">波効果なし</Button>
</div>
, document.getElementById('sample7')
);
);
※注意してください。ブール値を渡さなければいけないためdisableFocusRipple="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。

children

子要素を直接記述するのではなくchildrenで指定できます。
const tukuttaDiv1 = <div>tukuttaDiv1</div>;
const tukuttaDiv2 = () => {
return <div>tukuttaDiv2</div>
};
ReactDOM.render(
<div>
<Button variant="containedchildren={tukuttaDiv1}></Button>
<Button variant="containedchildren={tukuttaDiv2()}></Button>
</div>
, document.getElementById('sample8')
);
);
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
戻る

全体目次