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

Question

有没有办法创建一个顶部有标题的盒子或纸张，如下截图所示：

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

感谢您的帮助

Answer 1

您可以将 aBox的底层元素更改为 afieldset并将一个legend元素添加为 MUI 的子元素Box，但您可能需要对其应用一些样式，因为 MUI 不提供fieldset/的样式版本legend。

\n

import React from "react";\nimport Box from "@mui/material/Box";\n\nconst FieldsetExample = () => {\n  return (\n    <Box component="fieldset">\n      <legend>Jean-Fran\xc3\xa7ois H</legend>\n      Box content goes here.\n    </Box>\n  );\n}\n

\n

渲染：
\n

\n

工作 CodeSandbox：
\n https://codesandbox.io/s/nostalgic-booth-09dwu7?file=/demo.js

\n

文档参考：
\n MUI 文档 - BoxAPI 属性（请参阅component）
\n MDN 文档 - <fieldset>：字段集元素

\n