Question

设计一个React应用程序时，我想要的是在顶部边框上有一个Card或Paper的标题，并在左侧添加一些缩进，如下所示：

我进行了很多搜索，但找不到通用的方法。我应该创建一个自定义组件还是有办法呢？

Answer 1

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

它可能看起来像这样：

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

结果：

Material-UI将这种方法用于TextField（demo here）的“概述”变体。处理此方面的代码是NotchedOutline组件（source here）。

您还可以通过position属性相当容易地自己做某事，以将标题元素移到边框上方。实际上，这将使您可以使用其中的material-ui组件之一来提供大多数样式，然后将标题移至边框上。