← Modification précédente Modification suivante →

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

@@ Ligne 1 : / Ligne 1 : @@
 = Links =
-* [https://mui.com MUI]
+* [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 =