Метод 1: использование компонента «Типография»
Один простой способ создать разделитель с текстом — использовать компонент «Типография» из Material-UI. Вы можете установить вариант «h6» или любой другой желаемый вариант заголовка и добавить нижнее поле, чтобы создать некоторый интервал. Вот пример:

import { Typography } from '@mui/material';
<Typography variant="h6" gutterBottom>
  Your Text Here
</Typography>

Метод 2: пользовательское оформление с помощью компонента Box
Если вам нужен больший контроль над стилем разделителя, вы можете использовать компонент Box в сочетании с CSS. Компонент Box позволяет применять собственные стили, такие как цвет фона, отступы и поля. Вот пример:

import { Box } from '@mui/material';
<Box
  sx={{
    backgroundColor: 'gray',
    padding: '10px',
    marginBottom: '20px',
  }}
>
  Your Text Here
</Box>

Метод 3: компонент «разделитель» с типографикой
Material-UI также предоставляет компонент «разделитель», который можно использовать в сочетании с типографикой для создания более визуально привлекательного разделителя с текстом. Вот пример:

import { Divider, Typography } from '@mui/material';
<Typography variant="h6" gutterBottom>
  Your Text Here
</Typography>
<Divider />

Метод 4: пользовательский компонент-разделитель
Чтобы получить еще больше возможностей настройки, вы можете создать пользовательский компонент-разделитель с помощью CSS. Этот метод позволяет создавать разделители уникальных форм, цветов и анимации. Ниже приведен пример пользовательского компонента-разделителя:

import React from 'react';
import './CustomDivider.css';
const CustomDivider = () => {
  return <div className="custom-divider">Your Text Here</div>;
};
export default CustomDivider;

CSS:

.custom-divider {
  width: 100%;
  height: 1px;
  background-color: gray;
  margin: 20px 0;
}

В этой статье мы рассмотрели различные методы создания разделителей с текстом в Material-UI. Независимо от того, предпочитаете ли вы использовать готовые компоненты, такие как Typography и Divider, или настраивать свои собственные стили с помощью компонента Box, Material-UI предоставляет ряд опций в соответствии с вашими потребностями. Не стесняйтесь экспериментировать с этими методами и адаптировать их в соответствии с требованиями дизайна вашего проекта. Приятного кодирования!