reactjs - 排版中的嵌套样式

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>
...

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