MaterialUI: Paper or Card title

Question

Designing a React application, what I want is having the title of a Card or Paper on the top border with some indention from left side, like this:

I searched a lot and couldn't find a generic way to do so. Should I create a customised component or there's way for this?

Answer 1

I don't know exactly what you want it to look like, but you can achieve something like that by using the fieldset and legend elements.

It might look like this:

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

Result:

This approach is used by Material-UI for the "Outlined" variant of TextField (demo here). The code that handles this aspect is the NotchedOutline component (source here).

You can also fairly easily do something yourself via a position attribute to move a title element up over the border. This would actually allow you to use one of those material-ui components to provide most of the styles, and then just move the title on to the border.

Checkout this Codepen for an examples: https://codepen.io/codingmatty/pen/bOXKpZ