title: MaterialUI TextField : changing background color is not working as it is supposed to
body: <p>I'm trying to set the background color for <code>TextField</code> components in the app I'm working on, however it seems that when I add <code>style={{background: &quot;rgb(232, 241, 250)&quot;}}</code> to this component with my custom RGB values it displays them on top of the default gray background color.</p>
  <p>Background color supposed to be same light blue as in the components above:
  <a href="https://i.stack.imgur.com/WveRl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WveRl.png" alt="problem screenshot" /></a></p>
  <ol>
  <li><p>I tried to resolve it by just adding the <code>style</code> property to it</p>
  </li>
  <li><p>Also, by adding <code>makeStyles()</code> to the component and attaching it through <code>className</code></p>
  </li>
  </ol>
  <p>In both cases, I got this output as on the screenshot above.</p>
  <ol start="3">
  <li>I was able to get the correct background color by removing <code>variant=filled</code> or setting it to <code>standard</code> or <code>outlined</code>, but then the padding around the text would be removed.</li>
  </ol>
  <p>I don't really understand what is this issue and how it could be actually fixed?</p>
  <pre><code>import React from &quot;react&quot;;
  import {TextField} from &quot;@material-ui/core&quot;;
  
  import { makeStyles } from '@material-ui/core/styles';
  
  const useStyles = makeStyles((theme) =&gt; ({
       root: {
           background: 'rgb(232, 241, 250)'
        },
  }));
  
  export interface InquiryContentInputProps {
     content: string;
     onChange: (content: string) =&gt; void;
  }
  
  export function InquiryContentInput(props: InquiryContentInputProps) {
     const classes = useStyles();
  
     return (
         &lt;TextField
            variant=&quot;filled&quot;
            // style={{background: &quot;rgb(232, 241, 250)&quot;}}
            className={classes.root}
            fullWidth={true}
            multiline={true}
            rows={5}
            rowsMax={10}
            value={props.content}
            onChange={(e) =&gt; props.onChange(e.target.value as string)}
            label=&quot;Суть обращения&quot;/&gt;
     )
  }
  </code></pre>