MUI Core には、新機能をより迅速にリリースするための基本的な React UI コンポーネント ライブラリが含まれています。
Joy UIは、美しくデザインされたReact UIコンポーネントのライブラリです。
MUI Base は、「スタイルなし」コンポーネントと低レベルのフックのライブラリです。Base を使用すると、アプリの CSS とアクセシビリティ機能を完全に制御できます。
MUIシステムは、カスタムデザインをすばやくレイアウトするのに役立つCSSユーティリティのコレクションです。
マテリアル 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 システムは 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のコンポーネントを使用する基本的なアプリの例を次に示します。
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を使用したサンプルプロジェクトのコレクションが含まれています。
完全なテンプレートとテーマは、MUI ストアで見つけることができます。
寄稿ガイドを読んで、開発プロセス、バグ修正と改善の提案方法、変更のビルドとテストの方法について学びます。
MUI Core への貢献は、問題やプル要求だけではありません。 MUI をサポートするには、コード ベースに貢献する以外にも多くの方法があります。
変更ログは定期的に更新され、新しいリリースごとに何が変更されたかが反映されます。
将来の計画と優先度の高い機能と機能強化については、ロードマップをご覧ください。
このプロジェクトは、MITライセンスの条件に基づいてライセンスされています。
サポートされているバージョンの詳細とセキュリティ問題を報告するための連絡先の詳細については、セキュリティポリシーを参照してください。
これらの優れたサービスは、MUI のコア インフラストラクチャを後援します。
GitHub では、Git リポジトリをホストし、コントリビューションを調整できます。
Netlifyでは、ドキュメントを配布することができます。
BrowserStackを使用すると、実際のブラウザでテストできます。
CodeCovを使用すると、テストカバレッジを監視できます。