« Material-UI » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
|||
Ligne 1 : | Ligne 1 : | ||
= Links = | = Links = | ||
* [https://mui.com MUI] | * [https://mui.com MUI] | ||
= Theme = | |||
<filebox fn='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>, | |||
) | |||
</filebox> | |||
<filebox fn='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; | |||
</filebox> | |||
= Installation = | = Installation = |
Version du 26 octobre 2024 à 16:04
Links
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'; |