MUI

MUIとは

• React用デザインライブラリ
• 画面全体からではなくコンポーネント単位からデザインするのが特徴

インストール

パッケージ名自体が変わることが多く、パッケージ名とReactバージョンの依存関係に注意

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

サンプル

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

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

コンポーネント

ボタン

import Button from '@mui/material/Button'

チェックマーク

アイコン

npm install @material-ui/icons # React17まで
npm install @mui/icons-material # React18から

<Icon color="primary">add_circle</Icon>

ヘッダー

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

リスト

<List component="nav" className={classes.root} aria-label="contacts">
  <ListItem button>
    <ListItemIcon>
      <StarIcon />
    </ListItemIcon>
    <ListItemText primary="Chelsea Otakan" />
  </ListItem>
  <ListItem button>
    <ListItemText inset primary="Eric Hoffman" />
  </ListItem>
</List>