有没有办法在卡片内的 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

要解决 Mohamed 提到的问题，您可以将组件Box渲染更改为span（displayInline使用此方法是不必要的）：

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

Answer 2

您是否尝试过Box组件？

你可以做类似的事情

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

请注意，包装器上的component='div'propTypography是必需的，因为Box组件不能嵌套在 Typography 的 default 下p。

源排版字体粗细

Answer 3

你也可以这样做：

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