#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>
);
}
Комментарии:
1. не работает. Пожалуйста, проверьте мой codesandbox еще раз и разветвляйте его