ReactアプリにMaterial-UIをインストールする方法


  1. Reactアプリのプロジェクトフォルダに移動します。

  2. ターミナルまたはコマンドプロンプトを開き、以下のコマンドを入力してMaterial-UIをインストールします。

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

    このコマンドは、Material-UIの主要なパッケージである@mui/materialと、その依存関係である@emotion/react@emotion/styledをインストールします。

  3. Material-UIのインストールが完了したら、ReactコンポーネントでMaterial-UIのコンポーネントを使用することができます。例えば、Buttonコンポーネントを使用するには、以下のようにコードを記述します。

    import React from 'react';
    import Button from '@mui/material/Button';
    function App() {
     return (
       <div>
         <Button variant="contained" color="primary">
           Click me
         </Button>
       </div>
     );
    }
    export default App;

    この例では、Buttonコンポーネントを@mui/material/Buttonからインポートしています。ボタンの見た目はvariantcolorプロパティで指定できます。

  4. 上記のようにMaterial-UIのコンポーネントを使用することで、Reactアプリに美しいUI要素を追加することができます。さらに、Material-UIは多くのカスタマイズオプションを提供しているため、デザインやスタイルを自由に調整することもできます。

このようにして、ReactアプリにMaterial-UIをインストールして使用することができます。詳細な情報や他のコンポーネントの使用方法については、Material-UI公式ドキュメントを参照してください。