🦁

Material UI(Mui)入門

2023/05/01に公開

React

今回は、Reactにおける人気のUIライブラリである、Material UI(Mui)について解説していきます。

Material UIとは

先ほども紹介したように、Material UIとはUIライブラリの1つになります。

既に完成されている、ModalやTableなどを簡単に実装できるので、開発スピードが上がります。

他にも以下のようなメリットがあります。

マテリアルデザインが組み込まれている
アクセシビリティを最優先事項としている
ドキュメントが整備されていて、扱いも楽

そして、Material UIは主に次の3つから構成されています。

Mui Core: 基本的なコンポーネント
Mui X: DatePickerなどの複雑なコンポーネント
Template: 既に作成されているダッシュボードなどのUIテンプレート

主に使われるのはMui Coreになると思うので、今回はそこを詳しく解説していきます。

基本的な使い方

まずは、基本的な使い方を解説していきます。

@mui/materialをインストールすることで、Material UIを使えるようになります。

あとは次のように、必要なコンポーネントをimportして使用するだけです。

import * as React from 'react';
import Button from '@mui/material/Button';

export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

このように、かなり簡単に既に作成されているコンポーネントを使用することができます。

また、@mui/icons-materialをインストールすることで、Material UIが提供しているアイコンも使用できるようになります。

より詳細な使い方

また、Material UIのコンポーネントには様々なPropsが用意されています。

例えば、先ほどのButtonコンポーネントだと以下のようなPropsがあります。

variant: Buttonの種類を定義できる
color:色を定義できる
size:サイズを定義できる

<Button variant="outlined" size="medium" color="secondary">
   Medium
</Button>

他にも色々あり、このようにPropsで簡単にカスタマイズすることができるのも、Material UIの特徴の1つです。

どのようなPropsを定義できるかはドキュメントに詳しく書いてあるので、都度そちらを参照すればOKです。

Material UIのカスタマイズ

最後に、Material UIのThemeのカスタマイズ方法について解説していきます。

カスタマイズの種類は次の7種類になります。

palette : テーマで使う色を設定可能
typography :フォントを設定可能
spacing:marginなどのspaceの幅を設定可能
breakpoints:breakpointを設定可能
zIndex:コンポーネントごとのz-indexを設定可能
transitions:transitionを設定可能
components:componentごとの設定が可能

ちなみに、使い方はcreateThemeという関数を使用してthemeを作成s、ThemeProviderコンポーネントでそれを設定すればOKです。

const theme = createTheme({
   palette: {
      mode: 'dark'
      primary: {
        main: '#d87274',
        light: '#ffa2a3',
        dark: '#a34449'
       }
   }
 })
 
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

その他のカスタマイズ

最後に、その他のカスタマイズ方法を解説していきます。

Cssbaselineコンポーネント: resetCSSのような働きがある
GlobalStylesコンポーネント:Global Styleの定義が可能
sxProp:個別のコンポーネントのStyleを設定可能

また、Material UIはデフォルトではEmotionを使いますが、TailwindCSSやStyled Componentに合わせたカスタマイズも可能です。

詳しくはドキュメントに書いてあるので、そちらをご参照ください。

まとめ

今回は、Reactで使われるUIライブラリのMaterial UIについて解説してきました。

色々な現場で使われている技術なので、ぜひこの機会に身につけましょう。

宣伝

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。

インスタの発信も細々とやっています。

興味がある方は、ぜひリンクをクリックして確認してみてください！