material-ui - MUI Core(以前のMaterial-UI)は、常に必要だったReactUIライブラリです。独自の設計システムに従うか、マテリアルデザインから始めます。

(MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.)

Created at: 2014-08-19 03:11:54
Language: JavaScript
License: MIT

MUIロゴ

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

スポンサー

ダイヤモンド💎

たこ doit-intl zesty.io

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

ゴールド🏆

OpenCollectiveまたはPatreon経由

tidelift.com bit.dev text-em-all.com laststance.io online-aussie-casino.com sumatosoft.com megafamous.com

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

より多くの支持者

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

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

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

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を使用したサンプルプロジェクトのコレクションを特徴としています。

ドキュメンテーション

プレミアムテーマ

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

貢献

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

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

変更ログ

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

ロードマップ

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

ライセンス

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

スポンサーサービス

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

GitHub

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

Netlify

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

CrowdIn

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

BrowserStack

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

CodeCov

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