Material UI 中是否有一个带标题的框

Question

有没有办法创建一个盒子或一张纸，上面有一个标题，就像这个截图一样：

我说的是左上角的标题部分。我尝试使用 Box 或 Paper 组件，但似乎没有该选项。

谢谢您的帮助

Answer 1

您可以将

Box

的底层元素更改为

fieldset

并添加

legend

元素作为 MUI

Box

的子元素，但您可能需要像 MUI 一样对其应用一些样式不提供

fieldset

/

legend

的样式版本。

import React from "react";
import Box from "@mui/material/Box";

const FieldsetExample = () => {
  return (
    <Box component="fieldset">
      <legend>Jean-François H</legend>
      Box content goes here.
    </Box>
  );
}

渲染：

工作代码沙盒：
https://codesandbox.io/s/nostalgic-booth-09dwu7?file=/demo.js

文档参考：
MUI 文档 -

Box

API 道具（请参阅

component

）
MDN 文档 -

<fieldset>

：字段集元素