Links

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';

<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';

<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';

<Paper elevation={3} />

Data Sisplay

Material Icons

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

<AddIcon />

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

Button

Material Icons

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

<IconButton aria-label="add" color="primary">
  <AddIcon />
</IconButton>

Table

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

<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>

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',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
  },
});

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';