有没有办法在卡片中的 Material-UI Typography 元素中加粗一个单词而不改变渲染？答案

【问题标题】：Is there a way to bold a word within a Material-UI Typography element within a Card without a shift on render?有没有办法在卡片中的 Material-UI Typography 元素中加粗一个单词而不改变渲染？
【发布时间】：2020-08-30 00:46:00
【问题描述】：

我试图在 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>

【问题讨论】：

我正在使用 标签并且没有可见的重新加载，也许这个解决方案仍然可行？

标签： html reactjs material-ui

【解决方案1】：

你试过Box组件吗？

你可以这样做

&lt;Typography component='div'&gt;Normal text &lt;Box fontWeight='fontWeightMedium' display='inline'&gt;medium font weight text&lt;/Box&gt; and some more normal text&lt;/Typography&gt;

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

来源Typography font weight

【讨论】：

这会造成警告
不能作为
的后代出现。
嘿@MohamedDaher你能分享你的代码的sn-p吗？您是否可以在
标记内添加此 Typography div 组件？
好吧，我不再拥有它了，但我通过在 Typography 中简单地添加一个来修复我想要的东西，它就像魅力一样。谢谢检查，感谢！
从 Material-ui v4.11.4 开始在控制台中创建错误（不是警告），
不能作为
的后代出现
@PathToLife 你能分享一个例子吗？您确定在另一个 Typography
组件中没有此 Typography

组件吗？