在TextField材质用户界面中调整标签

Question

如何调整TextField的标签，并在Material UI中选择一个项目后出现灰色背景颜色？

请检查此代码和框 CLICK HERE

标签问题

出现灰色背景颜色

<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

这样做。将边距添加到TextField可以将其向下移动，因为通过添加样式，您仅更改了TextField。标签保持在原位。然后将TextField包裹在<div></div>中，然后将其向上移动相同的值。

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>
  );
}