Material-UIのCDNを使用したインストール方法の紹介


  1. CDNを使用したMaterial-UIのインストール手順:
    • HTMLファイルの<head>セクション内で、以下のスクリプトを追加します。
<script src="https://unpkg.com/material-ui@latest/umd/material-ui.production.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-ui@latest/umd/material-ui.production.min.css" />
  1. インストールが完了したら、Material-UIのコンポーネントを使用するための例を以下に示します。
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Click me
      </Button>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

上記の例では、Buttonコンポーネントを使用してボタンを作成しています。variantプロパティを使用してボタンのスタイルを指定し、colorプロパティを使用してボタンの色を指定することができます。

このように、Material-UIのCDNを使用することで、簡単にMaterial-UIをインストールして利用することができます。CDNを使用することで、ローカル環境に依存せずに最新のMaterial-UIバージョンを利用することができます。