html - 有没有办法在卡片内的 Material-UI Typography 元素中加粗一个词，而无需渲染？

Question

我试图在 React Material-UI 中加粗一个词 <Typography>元素(也位于 Material-UI <Card> 内)。我只是使用 html 标签，它有效:

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

但是当我使用它们时，它们会在加载时产生可见的文本大小调整。

我离开嵌套 <Typography>标签，这迫使我应用一堆样式以使它们正常显示:

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

这似乎是一个笨拙的解决方案。我错过了什么吗？喜欢另一个原因 <b>标签导致加载延迟，还是内置 Material-UI 解决方案？
<Card>的完整代码，作为引用:

<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>

Answer 1

您是否尝试过 Box成分？
你可以做类似的事情

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

请注意 component='div'支持 Typography需要包装器为 Box组件不能嵌套在排版的默认设置下 p .
来源 Typography font weight