MUI コア

MUI Core には、新機能をより迅速にリリースするための基本的な React UI コンポーネント ライブラリが含まれています。

• マテリアルUIは、Googleのマテリアルデザインシステムの実装を特徴とするコンポーネントの包括的なライブラリです。

• Joy UIは、美しくデザインされたReact UIコンポーネントのライブラリです。

• MUI Base は、「スタイルなし」コンポーネントと低レベルのフックのライブラリです。Base を使用すると、アプリの CSS とアクセシビリティ機能を完全に制御できます。

• MUIシステムは、カスタムデザインをすばやくレイアウトするのに役立つCSSユーティリティのコレクションです。

取り付け

マテリアル UI

マテリアル UI は npm パッケージとして入手できます。

エヌピーエム:

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

糸：

yarn add @mui/material @emotion/react @emotion/styled

注:プレリリースのみを指します。 最新の安定版リリースに使用します。

@next

@latest

ムイ基地

MUI Base は npm パッケージとして入手できます。

エヌピーエム:

npm install @mui/base

糸：

yarn add @mui/base

注: MUI ベースはまだアルファ版です。 私たちは定期的に新しいコンポーネントを追加していますので、ぜひご参加ください!

MUIシステム

MUI システムは npm パッケージとして入手できます。

エヌピーエム:

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

糸：

yarn add @mui/system @emotion/react @emotion/styled

または、スタイリングエンジンとして使用する場合は、次のようにします。

styled-components

エヌピーエム:

npm install @mui/material @mui/styled-engine-sc styled-components

糸：

yarn add @mui/material @mui/styled-engine-sc styled-components

スタイルエンジンとして設定する方法の詳細については、スタイルエンジンガイドをご覧ください。

styled-components

スポンサー

ダイヤモンド 💎

ダイヤモンドスポンサーは、MUIに月額1,500ドル以上を約束したスポンサーです。

金 🏆

オープンコレクティブ経由またはPatreon経由

ゴールドスポンサーは、MUIに月額500ドル以上を約束したスポンサーです。

より多くの支援者

私たちの支援者の完全なリストを参照してください。

マテリアル UI の使用を開始する

マテリアルUIのコンポーネントを使用する基本的なアプリの例を次に示します。

Button

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

function App() {
  return <Button variant="contained">Hello World</Button>;
}

以下のインタラクティブなデモでは、コードを変更して、それが出力にどのように影響するかを確認してください。 (ヒント: に変更します。 その他のオプションについては、ドキュメントのボタンコンポーネントページを参照してください。

variant

"outlined"

color

"secondary"

問

コード ベースの変更を含まないハウツーの質問については、GitHub の問題ではなくスタック オーバーフローを使用してください。 スタックオーバーフローの「mui」タグを使用して、コミュニティが質問を見つけやすくします。

例

ドキュメントには、マテリアルUIを使用したサンプルプロジェクトのコレクションが含まれています。

ドキュメンテーション

• マテリアル UI
• ジョイ UI
• ムイ基地
• MUIシステム

プレミアムテーマ

完全なテンプレートとテーマは、MUI ストアで見つけることができます。

貢献

寄稿ガイドを読んで、開発プロセス、バグ修正と改善の提案方法、変更のビルドとテストの方法について学びます。

MUI Core への貢献は、問題やプル要求だけではありません。 MUI をサポートするには、コード ベースに貢献する以外にも多くの方法があります。

変更履歴

変更ログは定期的に更新され、新しいリリースごとに何が変更されたかが反映されます。

ロードマップ

将来の計画と優先度の高い機能と機能強化については、ロードマップをご覧ください。

ライセンス

このプロジェクトは、MITライセンスの条件に基づいてライセンスされています。

安全

サポートされているバージョンの詳細とセキュリティ問題を報告するための連絡先の詳細については、セキュリティポリシーを参照してください。

スポンサーサービス

これらの優れたサービスは、MUI のコア インフラストラクチャを後援します。

GitHub では、Git リポジトリをホストし、コントリビューションを調整できます。

Netlifyでは、ドキュメントを配布することができます。

BrowserStackを使用すると、実際のブラウザでテストできます。

CodeCovを使用すると、テストカバレッジを監視できます。