Material-UI（MUI）初心者必見！ゼロから学べる実践入門

はじめに

GoogleのMaterial Designガイドラインに基づいたReactコンポーネントライブラリです。

MUIのインストール

npm install @mui/material @emotion/react @emotion/styled

npm install @mui/icons-material

MUIの基本的な使用法

MUIを使用するには、まずアプリケーションにMUIのテーマプロバイダーを追加する必要があります。

import React from 'react';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import Button from '@mui/material/Button';

// テーマを作成する
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div style={{ padding: 20 }}>
        <h1>Hello, MUI!</h1>
        <Button variant="contained" color="primary">
          Primary Button
        </Button>
        <Button variant="outlined" color="secondary">
          Secondary Button
        </Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

主要なコンポーネント

Button: ボタンを作成します。variantプロパティで、contained（塗りつぶし）やoutlined（枠線）などのスタイルを選択できます。
Typography: テキストを表示するためのコンポーネントで、フォントスタイルやサイズをカスタマイズできます。
AppBar: アプリケーションのヘッダー部分を作成するためのコンポーネントです。
Card: コンテンツをまとめるためのコンポーネントで、画像やテキスト、アクションを含めることができます。

MUIのテーマカスタマイズ

MUIでは、テーマをカスタマイズしてアプリケーションの外観を変更できます。
createTheme関数を使って、カスタムテーマを作成します。

const theme = createTheme({
  palette: {
    primary: {
      main: '#4caf50', // プライマリカラーを緑色に変更
    },
  },
});

まとめ

Material-UI（MUI）は、Reactアプリケーションで素早く美しいUIを構築するための強力なツールです。