Change the Label in a TextField Component with Material UI

Question

Change the Label in a TextField Component with Material UI

How do I customize the label of a TextField and prevent a grey background color from appearing after selecting an item in Material UI?

To view the solution, please visit this CodeSandbox link: CLICK HERE

Label Customization Issue: https://i.sstatic.net/1Nqbi.jpg

Grey Background Color Problem: https://i.sstatic.net/bIF3U.jpg

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

css reactjs material-ui jss

Answer 1

Answer №1

Here's a method you can try: Adjust the margin of the TextField to create space below it without affecting the position of the Label. Then, enclose the TextField within a <div></div> and raise it by the same distance.

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

Answer 2

Here's a method you can try: Adjust the margin of the TextField to create space below it without affecting the position of the Label. Then, enclose the TextField within a <div></div> and raise it by the same distance.

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

Change the Label in a TextField Component with Material UI

Answer №1

Similar questions

Can you please provide the appropriate PropTypes for a dictionary in a ReactJS project?

Unexpected behavior in ReactJS when using Material UI

Moving TextField label orientation

Creating a dynamic and flexible div using CSS

Stop jQuery popups from wrapping text when resizing the browser window

What is the best way to calculate the total of a field with matching Project and Employee names?

The justify-content-sm-center behavior in Bootstrap seems to be malfunctioning

Configure remotePatterns in the next.config.js file on localhost to retrieve images from a local API source

Does renaming a page to index.html have any impact?

Activate or deactivate a button depending on the input value of a TextField in React.js

Adjust dimensions of 3D Object in React

There was no package discovered matching the designated pattern: D:a 1a***.zip

Learn how to retrieve information using a React app connecting to a Node.js and Express server, specifically when the React app is initiated from the

AngularJS is used to vertically collapse three different div elements. This feature

When a td element is clicked, the Textbox will also be clicked

Is it possible to stack images on top of each other on a webpage?

Enhance your breadcrumb experience with MUI Breadcrumbs in React Router by customizing the labels

participate in the eventChannel by performing all actions triggered instead of simply receiving the output

Hosting React on IIS without refreshing the DOM

Thymeleaf: Automating the Adjustment of Content Fragments