« Material-UI » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
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

Tsx.svg
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

Bash.svg
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';