Как сделать перенос строки в MUI (Material-UI) с использованием React?

В Material-UI (MUI), чтобы текст автоматически переносился на следующую строку в зависимости от ширины экрана, вы можете использовать компонент `Typography`. По умолчанию `Typography` будет обрабатывать перенос строк, если контейнер, в который он помещен, имеет ограниченную ширину.

Вот пример, как это можно сделать с использованием React и Material-UI:

```jsx
import React from 'react';
import { Typography, Box } from '@mui/material';

const App = () => {
  return (
    <Box sx={{ maxWidth: '600px', margin: '0 auto' }}>
      <Typography variant="h6" gutterBottom>
        Это пример текста, который будет автоматически переноситься на следующую строку, если ширина экрана станет слишком узкой.
      </Typography>
      <Typography variant="body1">
        Используя Material-UI, вы можете легко управлять стилями и размерами текста, чтобы они соответствовали вашим потребностям.
      </Typography>
    </Box>
  );
};

export default App;
```

### Пояснение к коду:
1. **Box**: Используется для создания контейнера, в котором установлен максимальный размер в 600 пикселей и центрирование по горизонтали с помощью `margin: '0 auto'`.
2. **Typography**: Используется для отображения текста. В данном примере мы используем два текстовых элемента с различными вариантами (`variant="h6"` и `variant="body1"`), что также обеспечивает встроенные стили.
3. **Перенос строк**: Так как `Typography` по умолчанию является блочным элементом, текст будет автоматически переноситься на новую строку, если ширина контейнера недостаточна, что и позволяет достичь нужного эффекта.

Такой подход обеспечит соответствующий перенос строк в зависимости от ширины экрана, делая интерфейс отзывчивым и удобным для пользователей.

const HomeText = (props) => (
  <Typography
    variant='h1'
    component="h2"
    sx={{
      color: "white",
      fontWeight: "bolder",
      maxWidth: {
        xs: "95%",  // для мобильных
        sm: "85%",  // для планшетов
        md: "80%"   // для десктопов
      },
      wordWrap: "break-word"
    }}
  >
    {props.children}    
  </Typography>
)