印刷术中的嵌套造型

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

使用dangerouslysetinnerhtml插入原始的HTML，否则造型将无法正常工作