How can I add heading in a box component in Material UI?-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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>