« Material-UI » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
(→Links) |
||
| Ligne 1 : | Ligne 1 : | ||
= Links = | = Links = | ||
* [https://mui.com | * [https://mui.com Material-UI] | ||
* [https://github.com/mui/material-ui/blob/master/examples/material-ui-vite-ts Example project Material-UI, Vite, TypeScript] | |||
= Theme = | = Theme = | ||
Version du 26 octobre 2024 à 16:05
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'; |
