Material-UI

Links

• Material-UI
• Example project Material-UI, Vite, TypeScript

Layout

Box

Generic container for grouping other components like the div tag.
It has access to the theme and the sx property.

import { Box } from '@mui/material'; <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}> This Box renders as an HTML section element. </Box>

Container

Allows to control the maximum width by being responsive based on the viewport size.

Value	Description
xs	Extra small (up to 600px)
sm	Small (up to 960px)
md	Medium (up to 1280px)
lg	Large (up to 1920px)
xl	Extra large (up to 1536px by default, although this can vary based on your theme settings)

import { Box, Container } from '@mui/material'; <Container maxWidth="sm"> <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} /> </Container>

Grid v2

Allows to define columns that scale and resize content. A page is splitted in 12 points.

import Grid from '@mui/material/Grid2'; <Grid container spacing={2}> <Grid size={{ xs: 6, md: 8 }}> <Item>xs=6 md=8</Item> </Grid> <Grid size={{ xs: 6, md: 4 }}> <Item>xs=6 md=4</Item> </Grid> <Grid size={{ xs: 6, md: 4 }}> <Item>xs=6 md=4</Item> </Grid> <Grid size={{ xs: 6, md: 8 }}> <Item>xs=6 md=8</Item> </Grid> </Grid>

Stack

One-dimensional layouts along the vertical or horizontal axis, with optional spacing and dividers between each element.

import { Stack } from '@mui/material'; <Stack direction="row" spacing={2}> <Item>Item 1</Item> <Item>Item 2</Item> <Item>Item 3</Item> </Stack>

Surfaces

Paper

Displays content on an elevated surface.
The elevation varies from 0 to 24 (default 1).

import { Paper } from '@mui/material'; <Paper elevation={3} />

Data Display

Material Icons

import AddIcon from '@mui/icons-material/Add'; <AddIcon />

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

Table

import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; <TableContainer component={Paper}> <Table sx={{ minWidth: 600 }} aria-label="table"> <TableHead> <TableRow> <TableCell align="right">Name</TableCell> </TableRow> </TableHead> <TableBody> {rows.map((row) => ( <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} > <TableCell component="th" scope="row"> {row.name} </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer>

Typography

import { Typography } from '@mui/material'; <Typography variant="h4" gutterBottom sx={{ mt: 2 }}> Title </Typography>

Inputs

Button

import { IconButton } from '@mui/material'; import AddIcon from '@mui/icons-material/Add'; <IconButton aria-label="add" color="primary"> <AddIcon /> </IconButton>

Styling

App.tsx

<div sx={{ display: flex }}></div>

Theme

• Dark mode

src/main.tsx

import { ThemeProvider } from '@mui/material/styles'; import theme from './theme'; createRoot(document.getElementById('root')!).render( <StrictMode> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </StrictMode>, )

src/theme.tsx

import { createTheme } from '@mui/material/styles'; import { red } from '@mui/material/colors'; const theme = createTheme({ cssVariables: true, palette: { mode: 'dark', primary: { main: '#556cd6', }, error: { main: red.A400, }, background: { default: 'rgb(50, 51, 61)', }, }, }); export default theme;

Installation

npm install @mui/material @emotion/react @emotion/styled npm install @mui/icons-material npm install @fontsource/roboto

main.tsx

import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css';