如何在材料UI中的盒子组件中添加标题？

发布于 2025-02-10 06:23:06 字数 698 浏览 1 评论 0原文

目前有两个盒子看起来像这样。我希望像标题一样在数字上放心。我对材料UI相对陌生。我感谢您如何将盒子前进的任何帮助。

两个框的代码：

<Grid item sm={6}> 
<Box component="span" sx={{ p: 2, border: 3,borderColor: 'error.main' }}>
Nifty
<Grid component="span" sx={{ p: 2}}> {row.data.price}</Grid>
</Box>
</Grid>



<Grid item sm={6}> 
<Box component="span" sx={{ p: 2, border: 3,borderColor: 'error.main' }}>
Sensex
<Grid component="span" sx={{ p: 2}}> {row.data.price}</Grid>
</Box>
</Grid>

谢谢。

原文

Two boxes currently look like this. I would like Nifty on top of the number like a heading. I'm relatively new to Material UI. I'd appreciate any help regarding how I can give heading to my boxes.

The code for the 2 boxes:

<Grid item sm={6}> 
<Box component="span" sx={{ p: 2, border: 3,borderColor: 'error.main' }}>
Nifty
<Grid component="span" sx={{ p: 2}}> {row.data.price}</Grid>
</Box>
</Grid>



<Grid item sm={6}> 
<Box component="span" sx={{ p: 2, border: 3,borderColor: 'error.main' }}>
Sensex
<Grid component="span" sx={{ p: 2}}> {row.data.price}</Grid>
</Box>
</Grid>

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青衫负雪 2025-02-17 06:23:06

添加display：'inline-block'到您的box，然后更改 span to p在您的价格中

<Box
  component="span"
  sx={{
    p: 2,
    border: 3,
    borderColor: "error.main",
    display: "inline-block",
    textAlign: "center"
  }}
>
  Sensex
  <Grid component="p" sx={{ p: 0 }}>
    {row.data.price}
  </Grid>
</Box>

Add display: 'inline-block' to your Box and change span to p in your price

<Box
  component="span"
  sx={{
    p: 2,
    border: 3,
    borderColor: "error.main",
    display: "inline-block",
    textAlign: "center"
  }}
>
  Sensex
  <Grid component="p" sx={{ p: 0 }}>
    {row.data.price}
  </Grid>
</Box>

回复收藏 0 原文

猫烠⑼条掵仅有一顆心 2025-02-17 06:23:06

这是您要寻找的吗？

 <Grid item sm={6}>
  <Box
    component="div"
    sx={{
      display: "inline-block",
      p: 2,
      border: 3,
      borderColor: "error.main",
      textAlign: "center"
    }}
  >
    <Box component="h2">Nifty</Box>

    <Box component="div" sx={{ p: 2, textAlign: "center" }}>
      {row.data.price}
    </Box>
  </Box>
</Grid>

Would this be what you are looking for?

 <Grid item sm={6}>
  <Box
    component="div"
    sx={{
      display: "inline-block",
      p: 2,
      border: 3,
      borderColor: "error.main",
      textAlign: "center"
    }}
  >
    <Box component="h2">Nifty</Box>

    <Box component="div" sx={{ p: 2, textAlign: "center" }}>
      {row.data.price}
    </Box>
  </Box>
</Grid>

回复收藏 0 原文

~没有更多了~