npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
- Copy the contents of the
mui-node-modules
folder into thenode_modules
folder of your project. - In the name of space-saving, the
mui-node-modules
folder has not been pushed to GitHub. To retrieve these folders you will need to clone the@mui
&@emotion
node modules.
import {
Container, Grid, Box, Button, IconButton, TextField,
Checkbox, Radio, Switch, FormControl, AppBar, BottomNavigation,
Drawer, Tabs, Tab, Paper, Card, Accordion, AccordionSummary,
AccordionDetails, CircularProgress, LinearProgress, Snackbar,
Alert, Avatar, Badge, Chip, List, ListItem, Table, TableBody,
TableCell, TableHead, TableRow, Typography, Tooltip, Modal
} from '@mui/material';
import {AddIcon, DeleteIcon} from '@mui/icons-material/Add';
-
Container
- Variants:
fixed
,maxWidth
- Variants:
-
Grid
- Options:
container
,item
,spacing
,direction
,justify
,alignItems
- Options:
-
Box
- Options:
m
,p
,border
,color
,bgcolor
- Options:
-
Button
- Variants:
text
,outlined
,contained
- Options:
color
,size
,disabled
- Variants:
-
IconButton
- Options:
color
,size
,disabled
- Options:
-
TextField
- Variants:
standard
,outlined
,filled
- Options:
multiline
,size
- Variants:
-
Checkbox
- Options:
checked
,disabled
,indeterminate
- Options:
-
Radio
- Options:
checked
,disabled
- Options:
-
Switch
- Options:
checked
,disabled
- Options:
-
FormControl
- Options:
variant
,margin
,fullWidth
- Options:
-
AppBar
- Options:
position
,color
- Options:
-
BottomNavigation
- Options:
value
,showLabels
- Options:
-
Drawer
- Variants:
permanent
,persistent
,temporary
- Variants:
-
Tabs
- Options:
value
,variant
,indicatorColor
,textColor
- Options:
-
Tab
- Options:
label
,icon
,disabled
- Options:
-
Paper
- Options:
elevation
,square
,variant
- Options:
-
Card
- Options:
raised
- Options:
-
Accordion
- Options:
expanded
,disabled
- Options:
-
CircularProgress
- Options:
size
,thickness
,value
- Options:
-
LinearProgress
- Options:
variant
,value
- Options:
-
Snackbar
- Options:
open
,autoHideDuration
- Options:
-
Alert
- Variants:
filled
,outlined
,standard
- Options:
severity
- Variants:
-
Avatar
- Options:
alt
,src
,variant
- Options:
-
Badge
- Options:
badgeContent
,color
,variant
- Options:
-
Chip
- Options:
label
,color
,variant
,clickable
- Options:
-
List
- Options:
dense
- Options:
-
ListItem
- Options:
button
,divider
,selected
- Options:
-
Table
- Options:
size
,stickyHeader
- Options:
-
Typography
- Variants:
h1
,h2
,h3
,h4
,h5
,h6
,subtitle1
,subtitle2
,body1
,body2
,caption
,button
,overline
- Variants:
-
Tooltip
- Options:
title
,placement
- Options:
-
Modal
- Options:
open
- Options:
- AddIcon
- DeleteIcon