「MUI」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「React | Next.js *Material UI (MUI) はReactアプリで利用できるコンポーネントを集めたライブラリ ==主なコンポーネント== *MUI Core…」) |
(→インストール) |
||
(同じ利用者による、間の3版が非表示) | |||
1行目: | 1行目: | ||
[[React]] | [[Next.js]] | [[React]] | [[Next.js]] | ||
+ | |||
+ | *https://mui.com/ | ||
*Material UI (MUI) はReactアプリで利用できるコンポーネントを集めたライブラリ | *Material UI (MUI) はReactアプリで利用できるコンポーネントを集めたライブラリ | ||
7行目: | 9行目: | ||
*MUI X : より複雑なユースケースに対応下コンポーネント群(一部有償) | *MUI X : より複雑なユースケースに対応下コンポーネント群(一部有償) | ||
*Templates : MUIベースで構築されたテンプレート群 | *Templates : MUIベースで構築されたテンプレート群 | ||
+ | |||
+ | ==インストール== | ||
+ | <pre> | ||
+ | $ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled | ||
+ | </pre> | ||
+ | |||
+ | *内部的に[https://emotion.sh/docs/introduction Emotion](フレームワークにとらわれず使うことができるCSS in JSのフレームワーク)を利用している | ||
+ | |||
+ | ==使用== | ||
+ | <pre> | ||
+ | import { Button } from '@mui/material'; | ||
+ | : | ||
+ | |||
+ | <Button variant="text">Text</Button> | ||
+ | </pre> |
2024年10月5日 (土) 05:48時点における最新版
- https://mui.com/
- Material UI (MUI) はReactアプリで利用できるコンポーネントを集めたライブラリ
主なコンポーネント
- MUI Core : 基本コンポーネント(無償)
- MUI X : より複雑なユースケースに対応下コンポーネント群(一部有償)
- Templates : MUIベースで構築されたテンプレート群
インストール
$ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
- 内部的にEmotion(フレームワークにとらわれず使うことができるCSS in JSのフレームワーク)を利用している
使用
import { Button } from '@mui/material'; : <Button variant="text">Text</Button>
© 2006 矢木浩人