时间戳

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

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

问题描述

<Typography>我正在尝试在 React Material-UI元素（也在 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>

标签： htmlreactjsmaterial-ui

解决方案

您是否尝试过使用Box组件？

你可以做类似的事情

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

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

源排版字体粗细

推荐阅读