title: How to change width of MuiInputBase-root?
body: <p>I am trying to customize a text input field. However, I am having trouble adjusting the width of the text field. To be more specific. I want to change the width of class=&quot;MuiInputBase-root MuiInput-root MuiInputBase formControl MuiInput-formControl&quot;, because it is somehow set to 800px and is outside my grid. But I don't know how to access it and override it? See the image below.</p>
  <pre><code>const styles = theme =&gt; ({
    formControlRoot: {
      border: &quot;2px solid lightgreen&quot;,
      width:&quot;50%&quot;,
      padding: 2,
      marginTop: 10
    },
    inputRoot: {
      border: &quot;2px solid blue&quot;,
      width:&quot;50%&quot;,
    },
    inputLabelRoot: {
      border: &quot;2px solid pink&quot;,
      width:&quot;50%&quot;,
    },
    formHelperTextRoot: {
      border: &quot;2px solid red&quot;,
      width:&quot;50%&quot;,
    },
  
    underline: {
        color: 'red' ,
  
        '&amp;::after': {
          border: '2px solid red',
          width:&quot;50%&quot;,
        },
         '&amp;::before': {
          border: '2px solid red',
          width:&quot;50%&quot;,
        }
      }
  });
  </code></pre>
  <pre><code>&lt;TextField 
          helperText=&quot;My Helper Text&quot;
           width=&quot;75%&quot;
          classes={{ root: classes.formControlRoot }}
          InputProps={{ classes: { underline: classes.underline }  }}
          InputLabelProps={{ classes: { root: classes.inputLabelRoot } }}
          FormHelperTextProps={{ classes: { root: classes.formHelperTextRoot } }}
        /&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/eUT8i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eUT8i.png" alt="enter image description here" /></a></p>