← Modification précédente Modification suivante →

Version du 26 octobre 2024 à 16:16

Links

Button

Material Icons

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

@@ Ligne 2 : / Ligne 2 : @@
 * [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://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 =