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