« Material-UI » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(→Links) |
Aucun résumé des modifications |
||
Ligne 2 : | Ligne 2 : | ||
* [https://mui.com Material-UI] | * [https://mui.com Material-UI] | ||
* [https://github.com/mui/material-ui/blob/master/examples/material-ui-vite-ts Example project Material-UI, Vite, TypeScript] | * [https://github.com/mui/material-ui/blob/master/examples/material-ui-vite-ts Example project Material-UI, Vite, TypeScript] | ||
= [https://mui.com/material-ui/react-button/ Button] = | |||
* [https://mui.com/material-ui/material-icons#search-material-icons Material Icons] | |||
<kode lang='tsx'> | |||
import IconButton from '@mui/material/IconButton'; | |||
import AddIcon from '@mui/icons-material/Add'; | |||
<IconButton aria-label="add" color="primary"> | |||
<AddIcon /> | |||
</IconButton> | |||
</kode> | |||
= Theme = | = Theme = |
Version du 26 octobre 2024 à 16:16
Links
Button
import IconButton from '@mui/material/IconButton'; import AddIcon from '@mui/icons-material/Add'; <IconButton aria-label="add" color="primary"> <AddIcon /> </IconButton> |
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'; |