MaterialUI: Название бумаги или карты

Я не знаю, как именно вы хотите, чтобы это выглядело, но вы можете добиться чего-то подобного, используя элементы fieldset и legend.

Это может выглядеть так:

<fieldset>
  <legend>Current</legend>
  // Content within border.
</fieldset>

Результат:

Этот подход используется Material-UI для «контурного» варианта TextField (демо здесь). Код, который обрабатывает этот аспект, — это компонент NotchedOutline (источник здесь).

Вы также можете довольно легко сделать что-то самостоятельно с помощью атрибута position, чтобы переместить элемент заголовка выше границы. На самом деле это позволит вам использовать один из этих компонентов material-ui для предоставления большинства стилей, а затем просто переместить заголовок к границе.

Проверьте этот Codepen для примеров: https://codepen.io/codingmatty/pen/bOXKpZ