« Material-UI » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
(→Button) |
||
| Ligne 12 : | Ligne 12 : | ||
<AddIcon /> | <AddIcon /> | ||
</IconButton> | </IconButton> | ||
</kode> | |||
= Table = | |||
<kode lang='tsx'> | |||
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="customized 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> | |||
</kode> | </kode> | ||
Version du 26 octobre 2024 à 16:18
Links
Button
|
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="customized 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>
|
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
|
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'; |
