Material UI 中是否有带有标题的框答案

【问题标题】：Is there a Box with Title in Material UIMaterial UI 中是否有带有标题的框
【发布时间】：2022-10-12 23:59:44
【问题描述】：

有没有一种方法可以创建一个顶部有标题的盒子或纸张，就像这个截图：

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

感谢您的帮助

【问题讨论】：

【解决方案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 Docs - Box API props (see component)
MDN Docs - <fieldset>: The Field Set element

【讨论】：

仅供参考，这也适用于 MUI 4（您没有指定版本），只需更改导入即可。
不错，不知道
哇，非常感谢你。这正是我一直在寻找的。你到底是怎么想出来的？过去一天我一直在寻找有关 MUI 文档的那种信息！
哈哈，我经常使用 Box component 道具（为了便于访问），我只是碰巧从你的照片中认出了 fieldset 元素。很高兴我能帮上忙！ :D