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

<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

Stack

Button

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

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

Table

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

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

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