排版中的嵌套样式

Question

我如何使用<Typography />对我的文本进行样式化？你能做这样的事吗？

const someText = 'Hello <b>World</b>';

...
  <Typography>
   {someText}
  </Typography>
...

还是我需要把我的短信分开？使用嵌套的排版，我似乎有一些布局问题。

Answer 1

我终于利用了这样一种定制风格：

const styleSheet = createStyleSheet('SomeComponent', (theme) => ({
  root: {
  },
...
  body2Bold: {
    fontFamily: theme.typography.body2.fontFamily,
    fontSize: theme.typography.body2.fontSize,
    fontWeight: 'bold',
  },
}));

然后在我的渲染功能中：

const { Hello, World, classes } = this.props;
...
    <Typography type="body2" color="default">
        {Hello}
        <span className={classes.body2Bold}>
          &nbsp;{World}
        </span>.
    </Typography>
...

缺点是，我需要将一些文本分解成不同的变量。

Answer 2

我使用的材料-ui 4。*而这样做是完全合法的。

​

<Typography variant={'h5'} >Treffen Sie auf der it-sa 2019 die Micro Focus 
     <Typography display={'inline'} >und diskutieren Sie über </Typography>
</Typography>

​

Answer 3

您可以使用箱体组件

它接受fontWeight和display这样的属性：

<Typography component="div">
    This is normal text <Box display="inline" fontWeight="fontWeightBold">this is bold</Box>
</Typography>

注意：确保将component="div"添加到Typography中，否则会出现以下错误： <div>不能作为<p>的后代出现

这是一个码箱