Adjust Label in TextField Material UI

Question

How can i adjust the label of the TextField and there's a gray background color appearing after i select an item in Material UI?

Pls check this codesandbox CLICK HERE

Label Problem

Grey Background Color Appearing

<TextField
  variant="outlined"
  label="Choose"
  style={{
    background: "#fff"
  }}
  InputProps={{
    className: classes.input
  }}
  fullWidth
  select
>
  {results.map((result, index) => (
    <MenuItem key={index} value={result.id}>
      {result.likes}
    </MenuItem>
  ))}
</TextField>

Answer 1

Do like this. Add margin to TextField to move it down because by adding styling you are changing TextField only. Label stays in position. And the wrap the TextField inside a <div></div> and move it up by same value.

import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import React from "react";
import MenuItem from "@material-ui/core/MenuItem";

const useStyles = makeStyles((theme) => ({
  input: {
    height: "35px",
    marginTop: '8px',
  }
}));

export default function Test() {
  const classes = useStyles();
  const results = [
    {
      id: 1,
      name: "John Jomes",
      likes: "Food"
    },
    {
      id: 2,
      name: "John Jomes",
      likes: "Food"
    },
    {
      id: 3,
      name: "John Jomes",
      likes: "Food"
    }
  ];

  return (
    <div style={{marginTop: '8px'}}>
      <TextField
      variant="outlined"
      label="Choose"
      InputProps={{
        className: classes.input
      }}
      fullWidth
      select
      >
      {results.map((result, index) => (
        <MenuItem key={index} value={result.id}>
          {result.likes}
        </MenuItem>
      ))}
      </TextField>
    </div>
  );
}