Verschachteltes Styling innerhalb der Typografie

Question

Wie kann ich meinen Text mit <Typography /> formatieren? Ist es möglich, so etwas zu tun:

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

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

Oder muss ich meinen Text teilen? Mit geschachtelten Typografien scheinen mir einige Layoutprobleme zu bestehen.

Answer 1

I Verwendung eines benutzerdefinierten Stils wie diese schließlich gemacht:

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

Und dann in meiner Render-Funktion:

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

Der Nachteil ist, dass ich etwas Text in verschiedene Variablen aufteilen muss.

Answer 2

Verwendung dangerouslysetinnerhtml zum Einfügen von rohem HTML, sonst wird Styling nicht funktioniert