Material-UI

De Banane Atomic
Aller à la navigationAller à la recherche

Links

Layout

Box

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

Tsx.svg
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)
Tsx.svg
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.

Tsx.svg
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.

Tsx.svg
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).

Tsx.svg
import { Paper } from '@mui/material';

<Paper elevation={3} />

Data Display

Material Icons

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

<AddIcon />
Bash.svg
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

Table

Tsx.svg
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

Tsx.svg
import { Typography } from '@mui/material';

<Typography variant="h4" gutterBottom sx={{ mt: 2 }}>
  Title
</Typography>

Inputs

Button

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

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

Styling

App.tsx
<div sx={{ display: flex }}></div>

Theme

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

Bash.svg
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';