Чтобы установить Material-UI с TypeScript, выполните следующие действия:
-
Создайте новый проект TypeScript:
npx create-react-app my-app --template typescript -
Установите Material-UI и необходимые зависимости:
npm install @mui/material @emotion/react @emotion/styled -
Импортируйте необходимые компоненты из Material-UI и начните использовать их в своем коде. Вот несколько примеров:
Пример 1. Использование компонента «Кнопка»
import { Button } from '@mui/material'; function App() { return ( <div> <Button variant="contained" color="primary"> Click me </Button> </div> ); }Пример 2. Использование компонента TextField
import { TextField } from '@mui/material'; function App() { return ( <div> <TextField label="Name" /> </div> ); }Пример 3. Использование компонента диалогового окна
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material'; function App() { const [open, setOpen] = React.useState(false); const handleClickOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; return ( <div> <Button variant="contained" color="primary" onClick={handleClickOpen}> Open Dialog </Button> <Dialog open={open} onClose={handleClose}> <DialogTitle>Dialog Title</DialogTitle> <DialogContent>Dialog Content</DialogContent> <DialogActions> <Button onClick={handleClose}>Close</Button> </DialogActions> </Dialog> </div> ); }
Это всего лишь несколько примеров использования компонентов Material-UI с TypeScript. Вы можете изучить документацию Material-UI, чтобы узнать больше о компонентах и их использовании.