材料、材料のUIを取得しましょう

(9/27/21:材料ui(mui)がVersion 5をリリースした後).
どのCSSフレームワークは、反応のために最高です、そして、なぜそれは材料UIですか?材料UIは、それがGoogle's Material Designに基づいて設計と反応コンポーネントのフレームワークです.あなたが反応に精通している場合は、どのように簡単にコンポーネントで動作するように知っている.スタイル、コンテナ、ボタン、テキストなどをする必要がある場合は、ちょうどその要素のための材料UIコンポーネントをインポートし、小道具とそれをカスタマイズします.あなたのプロジェクトと利用可能なコンポーネントのいくつかを設定してみましょう.


インストール
最初にNPM経由でソースファイルをインストールします

npm install @material-ui/core

デフォルトのRobotoフォントをインデックスに読み込みます.HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

コンポーネント
Material-UIサイトに行き、使用しているコンポーネントを検索します.下のページの下にスクロールし、APIをクリックすると、すべての小道具とカスタマイズポイントが表示されます.
最初にコンポーネントをプロジェクトにインポートします

import Typography from '@material-ui/core/Typography'

コンポーネントにラップされる必要があるコンテンツを持っているかどうかによって、コンポーネントを閉じることができます

<Typography>
  Wrapped content
</Typography>

<TextField />

バリアントpropを使用してコンポーネントをカスタマイズする

<Typography variant='h1'>
  This is H1
</Typography>
<Typography variant='h2'>
  This is H2
</Typography>

グリッド
材料UIはflexboxに基づいて12列グリッドシステムを提供します.
グリッドコンポーネント

import Grid from '@material-ui/core/Grid'

グリッドアイテムを囲むグリッドコンテナーを作成します

<Grid container>
  <Grid item>
    Item 1
  </Grid>
  <Grid item>
    Item 2
  </Grid>
  <Grid item>
    Item 3
  </Grid>
  <Grid item>
    Item 4
  </Grid>
</Grid>

これはお互いに隣接してこれらのアイテムを置きます、しかし、我々はブレークポイントで通過することができます、そして、それは間隔をつくって、格子を反応させます

<Grid container>
  <Grid item xs={3}>
    Item 1
  </Grid>
  <Grid item xs={3}>
    Item 2
  </Grid>
  <Grid item xs={3}>
    Item 3
  </Grid>
  <Grid item xs={3}>
    Item 4
  </Grid>
</Grid>

引き出し
ナビゲーション引き出しは、あなたのリンクや他のアプリの機能を保持することができます.引き出しの種類が異なります.

一時的に-オープンまたはクローズを切り替えることができ、コンテンツ

の上に座ることができます

持続性-オープンまたはクローズを切り替えることができますし、コンテンツと同じレベルにある場合、これはあなたのコンテンツ

のサイズを再調整します
永久に

パーマネント-常に見えて、左の端に固定されて、彼らは

引き出しコンポーネントをインポート

import Drawer from '@material-ui/core/Drawer'

開いて閉じている引き出しコンポーネントでコンテンツをラップし、バリアントで型を設定します.ここで一時的な引き出しを使用します.それから、あなたが引き出しから我々がアンカーで割り当てるのを望む側

<Drawer variant='temporary' anchor='left'>
  Our Links
</Drawer>

引き出しを開いたり閉じたりするには、開いたウィンドウを開きます.私はUSENTを使用してボタンをトグルを使用するように

const [open, setOpen] = useState(false)
const toggleDrawer = () => { setOpen(open => !open) }

<Button onClick={toggleDrawer}>Toggle Drawer</Button>
<Drawer variant='temporary' anchor='left' open={open}>
  Our Links
</Drawer>

ドロワーには、コールバック関数を受け取るonclose propもあります.これは、ユーザーがアプリケーションの別の部分をクリックすると引き出しが開いているときにトリガされます.私たちの状態をトグルし、引き出しを閉じるために、私たちのtogleledrawer関数を割り当てることができます

<Drawer variant='temporary' anchor='left' open={open} onClose={toggleDrawer}>
  Our Links
</Drawer>

メイクスタイルフック
CSSクラスを作成し、カスタムCSSを追加できます
これは破壊を使用してインポートする必要があります

import { makeStyles } from '@material-ui/core'

CSSクラスを作成し、カスタムCSSを追加するオブジェクトを取得するMakeStyleに定数を割り当てます

const useStyles = makeStyles({
   text: {
     fontSize: 50,
     backgroundColor: 'red'
   }
})

コンポーネント関数の中でusestylesに別の定数を代入して呼び出すと、クラス名を持つスタイルにするコンポーネントに割り当てられます

function App() {
  const classes = useStyles()

  return (
    <Typography className={classes.text}>
      Wrapped Content
    </Typography>
  );
}

export default App;

また、多くのカスタマイズオプションは、再度使用可能なAPIをチェックしている.

カスタムテーマ
材料UIは、色を設定し、Robotoフォントを使用してデフォルトのテーマがあります.あなたは、材料のUIサイトのデフォルトテーマを検索することにより、デフォルトのテーマに設定を見つけることができます.カスタムテーマでこれらの設定を変更することができます.
最初のアプリケーションのルートコンポーネントに必要な機能をインポートするので、アプリ全体のカスタムテーマにアクセスして

import { createMuiTheme, ThemeProvider } from '@material-ui/core'

我々はカスタムテーマを作成するオブジェクトにかかるcreateMuiThemeに定数を割り当てます.ここでは、メインの色にアクセス

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#FEFEFE'
    }
  }
})

ThemeProviderをラップして全体のアプリをテーマを使用して作成したカスタムテーマを割り当てる

function App() {

  return (
    <ThemeProvider theme={theme}>
      <Typography color='primary'>
        Wrapped Content
      </Typography>
    </ThemeProvider>
  );
}

export default App;

タイポグラフィコンポーネントのフォントを変更することができます

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#FEFEFE'
    }
  },
  typography: {
    fontFamily: 'Quicksand'
  }
})

デフォルトのテーマを見て、カスタマイズしたい他の設定を見つける

結論
あなたが材料のUIを見ることができるように非常に使いやすくカスタマイズ可能です.グリッドコンポーネントは非常に応答性のアプリを作成することが容易になります.深く潜るために、私は材料UIサイトのドキュメンテーションを通して読書を推薦します.私はまた、私は材料UIについて学ぶために使用される偉大なYouTubeチュートリアルをリンクします.ハッピーコーディング!

資源
Material-UI