MUIコア

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

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

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

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

インストール

マテリアルUI

Material UIは、npmパッケージとして利用できます。

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

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

注：

@next

@latest

MUIベース

MUI Baseは、npmパッケージとして利用できます。

// with npm
npm install @mui/base

// with yarn
yarn add @mui/base

注：MUIベースはまだアルファ版です。私たちは定期的に新しいコンポーネントを追加しています、そしてあなたは貢献することを歓迎します！

MUIシステム

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

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

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

styled-components

// with npm
npm install @mui/system @mui/styled-engine-sc styled-components

// with yarn
yarn add @mui/system @mui/styled-engine-sc styled-components

スタイルエンジンとして構成する方法の詳細については、

styled-engine

styled-components

スポンサー

ダイヤモンド💎

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

ゴールド🏆

OpenCollectiveまたはPatreon経由

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

より多くの支持者

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

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

Button

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

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

以下のインタラクティブなデモでは、コードを変更して、出力にどのように影響するかを確認してください。（ヒント：とに変更し

variant

"outlined"

color

"secondary"

Button

質問

コードベースの変更を伴わないハウツーの質問については、GitHubの問題の代わりにStackOverflowを使用してください。Stack Overflowで「mui」タグを使用すると、コミュニティが質問を見つけやすくなります。

例

私たちのドキュメントは、マテリアルUIを使用したサンプルプロジェクトのコレクションを特徴としています。

ドキュメンテーション

• マテリアルUI
• MUIベース
• MUIシステム

プレミアムテーマ

完全なテンプレートとテーマはMUIストアにあります。

貢献

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

MUI Coreへの貢献は、単なる問題やプルリクエスト以上のものです。コードベースに貢献する以外にも、MUIをサポートする方法はたくさんあります。

変更ログ

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

ロードマップ

将来の計画と優先度の高い機能と拡張機能は、ロードマップに記載されています。

ライセンス

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

スポンサーサービス

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

GitHubを使用すると、Gitリポジトリをホストし、投稿を調整できます。

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

Crowdinを使用すると、ドキュメントを翻訳できます。

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

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