title: Strange behavior of custom (with withStyle) controlled material-ui TextField
body: <p>I am trying to use a Material-ui TextField in a form.
  This Textfield is controlled in a way that only hexadecimal characters are authorized.</p>
  <pre><code>&lt;form style={{ flex: '1' }} onSubmit={this.handleSubmit} noValidate autoComplete=&quot;off&quot;&gt;
          &lt;TextField margin='normal' label=&quot;Base address&quot; size=&quot;small&quot; variant=&quot;outlined&quot; fullWidth
            InputProps={{ startAdornment: &lt;InputAdornment position=&quot;start&quot;&gt;0x&lt;/InputAdornment&gt; }}
            helperText=&quot;Please enter 8 hexadecimal digits&quot;
            value={this.state.address}
            onChange={event =&gt; {
              if (/^[0-9A-Fa-f]*$/.test(event.target.value))
                this.setState({ address: event.target.value })
              else this.setState({ address: this.state.address })
            }}
          /&gt;
  &lt;/form&gt;
  </code></pre>
  <p>This is working as expected, no problem.
  But when I replace the TextField by my custom one called CssTextField</p>
  <pre><code>const CssTextField = withStyles({
        root: {
          '&amp; label': {
            color: 'var(--input-foreground)',
            '&amp;.Mui-focused': {
              color: 'var(--inputValidation-infoBorder)',
            },
          },
          '&amp; input': {
            color: 'var(--input-foreground)',
          },
          '&amp; input:invalid + fieldset': {
            borderColor: 'var(--inputValidation-errorBorder)',
          },
  
          '&amp; .MuiFormHelperText-contained': {
            color: 'var(--input-foreground)',
          },
          '&amp; .MuiOutlinedInput-notchedOutline': {
            borderColor: 'var(--input-foreground)',
          },
  
          '&amp; .MuiOutlinedInput-root': {
            '&amp;:hover fieldset': {
              borderColor: 'var(--thinput-foreground)',
            },
            '&amp; fieldset': {
              borderColor: 'var(--input-foreground)',
            },
            '&amp;.Mui-focused fieldset': {
              borderColor: 'var(--inputValidation-infoBorder)',
            },
            '&amp; p.MuiTypography-colorTextSecondary': {
              color: 'var(--input-foreground)',
            },
          },
        },
      })(TextField);
  </code></pre>
  <p>The new style is applied but the behavior (not only the style) of the CssTextField changes compared to TextField.
  Indeed, once I enter a simple character, the focus is lost from the CssTextField and I need to click again in the field to enter a new character... which is of course not happening with the &quot;normal&quot; TextField.</p>
  <p>BTW this weird behavior does not occur when I remove the control (remove props value &amp; onChange) when using the CssTextField.</p>
  <p>So I am in a situation where I can control the input but not the style, or I can style the TextField but not control the input !</p>
  <p>Additional info: even with an empty style (setting only root:{} in withStyles) the issue occurs.</p>
  <p>Any suggestions is more than welcome.
  Thanks</p>