如何在Material UI的Box组件中添加标题，让标题显示在数值上方？

你当前代码里标题和价格横向并排，是因为作为行内元素的外层Box没有设置纵向排列规则，按以下调整即可实现标题在价格上方的效果：

核心调整点 #

• 给外层包裹的Box添加纵向flex布局属性，强制内部元素从上到下垂直排列
• 将原本直接写在Box里的「Nifty」「Sensex」文本单独包裹为独立元素，可单独配置标题样式
• 给标题和价格区域设置合理间距，做样式层级区分

调整后可直接使用的代码 #

<Grid item sm={6}> 
<Box 
  component="span" 
  sx={{ 
    p: 2, 
    border: 3,
    borderColor: 'error.main',
    display: 'flex',
    flexDirection: 'column',
    gap: 1 // 控制标题和价格之间的间距，可根据需求调整数值
  }}
>
  {/* 标题部分 */}
  <Box sx={{ fontWeight: 600, fontSize: '0.95rem' }}>
    Nifty
  </Box>
  {/* 价格数值部分 */}
  <Box sx={{ fontSize: '1.2rem' }}>
    {row.data.price}
  </Box>
</Box>
</Grid>

<Grid item sm={6}> 
<Box 
  component="span" 
  sx={{ 
    p: 2, 
    border: 3,
    borderColor: 'error.main',
    display: 'flex',
    flexDirection: 'column',
    gap: 1
  }}
>
  <Box sx={{ fontWeight: 600, fontSize: '0.95rem' }}>
    Sensex
  </Box>
  <Box sx={{ fontSize: '1.2rem' }}>
    {/* 注意替换为Sensex对应的数据源，原代码两个价格都取了row.data.price */}
    {row.data.price}
  </Box>
</Box>
</Grid>

优化建议 #

如果想要更贴合Material UI的设计规范，可以直接用内置的Typography组件渲染标题，不需要手动配置字号字重，会自动匹配项目主题样式，示例：

import Typography from '@mui/material/Typography';

// 替换原来的标题Box即可
<Typography variant="subtitle2" fontWeight="bold">
  Nifty
</Typography>

内容的提问来源于stack exchange，提问作者user460567