title: Remove Label on Material-UI Select Text Field
body: <p>I have a select field for gender which has the label positioned in the centre of the select, which is the desired layout.</p>
  
  <p><a href="https://i.stack.imgur.com/w1Wok.png" rel="noreferrer"><img src="https://i.stack.imgur.com/w1Wok.png" alt="Gender Field, nothing selected"></a></p>
  
  <p>When the user selects this field the label flies away to the top left corner as shown. What I want to do is remove the label entirely and replace that with a blue border.</p>
  
  <p><a href="https://i.stack.imgur.com/JPTtZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JPTtZ.png" alt="Gender Field, male selected"></a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>          &lt;TextField
              id='gender-select'
              select
              label="Gender"
              className={classes.textField}
              value={gender}
              onChange={data =&gt; setGender(data.target.value)}
              margin='normal'
              variant='outlined'&gt;
              {genders.map(option =&gt; (
                &lt;MenuItem key={option.value} value={option.value}&gt;
                  {option.label}
                &lt;/MenuItem&gt;
              ))}
            &lt;/TextField&gt;
  
  </code></pre>
  
  <p>and here is my styling code:</p>
  
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      marginTop: theme.spacing(1),
      '&amp; .MuiOutlinedInput-root': {
        '&amp; fieldset': {
          borderColor: '#CACACA'
        },
        '&amp;:hover fieldset': {
          borderColor: '#007AFF'
        },
        '&amp;.Mui-focused hover': {
          borderColor: '#007AFF'
        },
        '&amp;.Mui-focused fieldset': {
          borderColor: '007AFF'
        }
      }
    }
  })) 
  </code></pre>
  
  <p>I have tried adding a conditional on the label prop to nullify it, eg:</p>
  
  <p><code>label={gender== "" ? "Gender": null}</code></p>
  
  <p>but this simply gives me a blank line in place of the label.</p>
  
  <p>How do I change the label for a blue line when the field is in focus?</p>