title: How to change variant of typography on condition when it's text are too long
body: <p>I am new to using Material UI with ReactJs, TypeScript and trying to reduce the font size of typography when its text gets too large (3 or more lines)
  Here is my code snippet:-</p>
  <pre><code>     const x =() =&gt; {
      
      if(text.length &gt; 12 )
          return &quot;body1&quot;;
      else 
          return &quot;subtitle2&quot;;
    };
  
    const renderTitle = () =&gt; {
      return (
        &lt;Typography variant= {x} textAlign=&quot;center&quot; lineHeight={1.2}&gt;
          {text}
        &lt;/Typography&gt;
      );
    };
  </code></pre>
  <p>But its given error like</p>
  <pre><code>Type '() =&gt; &quot;subtitle2&quot; | &quot;body1&quot;' is not assignable to type '&quot;button&quot; | &quot;caption&quot; | &quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | &quot;h5&quot; | &quot;h6&quot; | &quot;inherit&quot; | &quot;subtitle1&quot; | &quot;subtitle2&quot; | &quot;body1&quot; | &quot;body2&quot; | &quot;overline&quot; | undefined'.
  </code></pre>
  <p>is there any way to change <strong>variant=&quot;body1&quot;</strong> when the text comes in 3rd line?
  Please help me</p>