-
Reactアプリのプロジェクトフォルダに移動します。
-
ターミナルまたはコマンドプロンプトを開き、以下のコマンドを入力してMaterial-UIをインストールします。
npm install @mui/material @emotion/react @emotion/styled
このコマンドは、Material-UIの主要なパッケージである
@mui/material
と、その依存関係である@emotion/react
と@emotion/styled
をインストールします。 -
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
からインポートしています。ボタンの見た目はvariant
とcolor
プロパティで指定できます。 -
上記のようにMaterial-UIのコンポーネントを使用することで、Reactアプリに美しいUI要素を追加することができます。さらに、Material-UIは多くのカスタマイズオプションを提供しているため、デザインやスタイルを自由に調整することもできます。
このようにして、ReactアプリにMaterial-UIをインストールして使用することができます。詳細な情報や他のコンポーネントの使用方法については、Material-UI公式ドキュメントを参照してください。