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

我不确切知道您希望它看起来像什么，但是您可以通过使用fieldset和legend元素来实现类似的目标。

它可能看起来像这样：

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

结果：

Material-UI 将这种方法用于 TextField 的“概述”变体（此处为演示）。处理这个方面的代码是NotchedOutline组件（源代码在这里）。

你也可以很容易地通过position属性自己做一些事情，将标题元素向上移动到边框上。这实际上允许您使用这些material-ui组件之一来提供大多数样式，然后只需将标题移动到边框上。

查看此 Codepen 以获取示例：https ://codepen.io/codingmatty/pen/bOXKpZ