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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With