在 TextField Material UI 中调整标签

Posted 2023-02-22

【中文标题】在 TextField Material UI 中调整标签

【英文标题】：Adjust Label in TextField Material UI

【发布时间】：2021-02-18 19:14:12

【问题描述】：

如何调整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>

【问题讨论】：

我不确定您在这里要求什么。你能澄清一下问题吗？

@ZacharyHaber。刚加了两张图。我想调整标签并去除灰色背景色

【参考方案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>
  );

【讨论】：

不起作用。请再次检查我的代码框并分叉它