title: Problem in Increasing Label in Material-Ui in React
body: <p>I have successfully increased the Label in the TextField of my React app.
  My problem is that when its on shrink, it just overlaps some line on its right.</p>
  <p><a href="https://i.stack.imgur.com/BikHJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BikHJ.png" alt="Click Here" /></a></p>
  <p><a href="https://codesandbox.io/s/material-ui-custom-textfield-composition-forked-m6j18?file=/src/Demo.js" rel="nofollow noreferrer">Click Here</a></p>
  <pre><code>import React from &quot;react&quot;;
  import TextField from &quot;@material-ui/core/TextField&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      &quot;&amp; .MuiInputLabel-shrink&quot;: {
        fontSize: &quot;24px&quot;
      }
    }
  }));
  
  export default function CustomTextField({ InputLabelProps = {}, ...props }) {
    const classes = useStyles();
    return &lt;TextField {...props} className={classes.root} /&gt;;
  }
  </code></pre>