【React】Material-UIのついて　part-2

Posted on by masumasu

こんにちわ、masumasuです。
日ごとに秋が深まってまいりますが皆様いかがお過ごしでしょうか。
今回は、前回ご紹介したReactのMaterial-UIの使い方について書いていきます。

インストールとセットアップ

まずは、Material-UIをプロジェクトにインストールするところから始めましょう。

次のコマンドを実行することで、必要なパッケージが追加されます。

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

@emotion/reactと@emotion/styledは、Material-UIでスタイルをカスタマイズするためのツールです。

これでセットアップは完了です。次に、実際にコンポーネントを使ってみましょう。

基本的な使用例：ボタンを追加する

Material-UIのコンポーネントは、シンプルにインポートして利用できます。例えば、ボタンを作成する場合は次のように書きます。

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

function MyButton() {
  return (
    <Button variant="contained" color="primary">
      クリックしてね
    </Button>
  );
}

export default MyButton;

このコードでは、Buttonコンポーネントを使って、Material Designに基づいたスタイリッシュなボタンを作成しています。

variantプロパティでボタンのスタイルを変更でき、colorで色も選択できます。

グリッドレイアウトを活用する

次に紹介するのは、レイアウトを簡単に作成できるGridコンポーネントです。

複数のコンポーネントを綺麗に並べたい場合に便利です。例えば、以下のように使います。

import Grid from '@mui/material/Grid';

function MyGrid() {
  return (
    <Grid container spacing={3}>
      <Grid item xs={6}>
        <div>左側の要素</div>
      </Grid>
      <Grid item xs={6}>
        <div>右側の要素</div>
      </Grid>
    </Grid>
  );
}

Gridコンポーネントの中にあるcontainerは親コンポーネント、itemは子コンポーネントです。xs={6}というプロパティで、それぞれの要素が画面幅の50%を占めるようにしています。

カスタマイズとテーマ

Material-UIは、テーマを使って全体のデザインを統一することが可能です。

デフォルトテーマを利用することもできますが、自分で色やフォントをカスタマイズすることも簡単です。以下のようにして、テーマをカスタマイズすることができます。

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

function ThemedButton() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">カスタムテーマボタン</Button>
    </ThemeProvider>
  );
}

export default ThemedButton;

この例では、primaryカラーをカスタマイズして、Buttonコンポーネントに適用しています。

ThemeProviderで囲むことで、テーマがその内部のコンポーネントに反映されるようになります。

まとめ

Material-UIを使うことで、ReactアプリケーションのUIを簡単にスタイリッシュかつモダンにすることができます。

基本的なコンポーネントの利用から、テーマのカスタマイズまで、柔軟にデザインを調整することが出来ます。
ご覧いただきありがとうございました。