Is there a way to bold a word within a Material-UI Typography element within a Card without a shift on render?

user_9154668 0
Viewed 17754

I'm trying to bold a single word within a React Material-UI <Typography> element (which also is within a Material-UI <Card>). I was just using html tags, and it works:

<Typography><b>First thing:</b> {answers[2]}</Typography>

But when I use them, they produce a visible re-sizing of the text on load.

I'm left nesting <Typography> tags, which forces me to apply a bunch of styling to make them appear normally:

<Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>

This seems like a janky solution. Am I missing something? Like another reason why the <b> tags are causing a load delay, or a built-in Material-UI solution?

Full code for the <Card>, as reference:

<Card className={classes.card}>
<CardActionArea>
 <RenderImage imageAddress={myImage} widthAndHeight={[230, 180]} style={{marginLeft: '10%'}} />
 <CardContent>
   <Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>
   <Typography><b>First thing:</b> {answers[2]}</Typography>
   <Typography><b>Second thing:</b> {answers[0]}</Typography>
   <Typography style={{marginBottom: 0}}><b>Third thing:</b> {answers[1]}</Typography>
 </CardContent>
 </CardActionArea>
</Card>
material-ui reactjs html
3 Answers

Have you tried with Box component?

You could do something like

<Typography component='div'>Normal text <Box fontWeight='fontWeightMedium' display='inline'>medium font weight text</Box> and some more normal text</Typography>

Note that component='div' prop on Typography wrapper is required as Box component cannot be nested under the Typography's default p.

Source Typography font weight

user_13613350

To fix the issue Mohamed mentioned, you can change the component Box renders as to span (displayInline will be unnecessary using this method):

<Typography>Normal text <Box component="span" fontWeight='fontWeightMedium'>medium font weight text</Box> and some more normal text</Typography>
user_139844150

You can also do something like this:

<Typography>normal text <strong>bold text</strong> normal text</Typography>
user_49344460
Related