Настройка метки в пользовательском интерфейсе TextField Material

#css #reactjs #material-ui #jss #react-material

#css #reactjs #материал-пользовательский интерфейс #jss #реагировать-материал

Вопрос:

Как я могу настроить метку текстового поля, и после выбора элемента в Material UI появляется серый цвет фона?

Пожалуйста, проверьте этот код и поле НАЖМИТЕ ЗДЕСЬ

Проблема с меткой

Появляется серый цвет фона

 <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>

1. Я не уверен, о чем вы здесь просите. Не могли бы вы прояснить проблему?

2. @ZacharyHaber. Только что добавлено две картинки. Я хотел настроить метку и удалить серый цвет фона

Ответ №1:

Сделайте вот так. Добавьте поле для текстового поля, чтобы переместить его вниз, потому что, добавляя стиль, вы меняете только текстовое поле. Метка остается на месте. И оберните текстовое поле внутри a <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>
  );
}