title: Is there a way to bold a word within a Material-UI Typography element within a Card without a shift on render?
body: <p>I'm trying to bold a single word within a React Material-UI <code>&lt;Typography&gt;</code> element (which also is within a Material-UI <code>&lt;Card&gt;</code>). I was just using html tags, and it works:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Typography&gt;&lt;b&gt;First thing:&lt;/b&gt; {answers[2]}&lt;/Typography&gt;
  </code></pre>
  
  <p>But when I use them, they produce a visible re-sizing of the text on load. </p>
  
  <p>I'm left nesting <code>&lt;Typography&gt;</code> tags, which forces me to apply a bunch of styling to make them appear normally:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Typography style={{display:'inline-flex', alignItems: 'baseline'}}&gt;&lt;Typography variant='h6' style={{marginRight:'3px'}}&gt;Path:&lt;/Typography&gt; {path}&lt;/Typography&gt;
  </code></pre>
  
  <p>This seems like a janky solution. Am I missing something? Like another reason why the <code>&lt;b&gt;</code> tags are causing a load delay, or a built-in Material-UI solution?</p>
  
  <p>Full code for the <code>&lt;Card&gt;</code>, as reference:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Card className={classes.card}&gt;
  &lt;CardActionArea&gt;
   &lt;RenderImage imageAddress={myImage} widthAndHeight={[230, 180]} style={{marginLeft: '10%'}} /&gt;
   &lt;CardContent&gt;
     &lt;Typography style={{display:'inline-flex', alignItems: 'baseline'}}&gt;&lt;Typography variant='h6' style={{marginRight:'3px'}}&gt;Path:&lt;/Typography&gt; {path}&lt;/Typography&gt;
     &lt;Typography&gt;&lt;b&gt;First thing:&lt;/b&gt; {answers[2]}&lt;/Typography&gt;
     &lt;Typography&gt;&lt;b&gt;Second thing:&lt;/b&gt; {answers[0]}&lt;/Typography&gt;
     &lt;Typography style={{marginBottom: 0}}&gt;&lt;b&gt;Third thing:&lt;/b&gt; {answers[1]}&lt;/Typography&gt;
   &lt;/CardContent&gt;
   &lt;/CardActionArea&gt;
  &lt;/Card&gt;
  </code></pre>