Использование Material-UI с TypeScript: полное руководство по созданию пользовательских интерфейсов React

Чтобы установить Material-UI с TypeScript, выполните следующие действия:

  1. Создайте новый проект TypeScript:

    npx create-react-app my-app --template typescript
  2. Установите Material-UI и необходимые зависимости:

    npm install @mui/material @emotion/react @emotion/styled
  3. Импортируйте необходимые компоненты из 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, чтобы узнать больше о компонентах и ​​их использовании.