如何从 Material UI TextField 中删除箭头图标

如何解决如何从 Material UI TextField 中删除箭头图标

我需要从我从 Material UI 文档 (https://material-ui.com/components/autocomplete/#autocomplete) Highlights 部分修改的 Material UI TextField 中删除作为向上和向下箭头的右侧图标。

我尝试了一些堆栈溢出的解决方案，如 (Remove the arrow and cross that appears for TextField type=“time” material-ui React) 和 (Remove the arrow and cross that appears for TextField type=“time” material-ui React) 但它们没有用，最后我得到了以下代码：

App.js：

import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";
import parse from "autosuggest-highlight/parse";
import match from "autosuggest-highlight/match";
import { InputAdornment,TextField } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";

const useStyles = makeStyles(() => ({
  noBorder: {
    border: "none"
  }
}));

export default function Highlights() {
  const classes = useStyles();

  return (
    <Autocomplete
      style={{ width: 300 }}
      options={top100Films}
      getoptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          margin="normal"
          required
          fullWidth
          autoFocus
          classes={{ notchedOutline: classes.input }}
          // onChange={handlePhoneNumberChange}
          placeholder="Search..."
          type="search"
          InputProps={{
            ...params.InputProps,startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),classes: { notchedOutline: classes.noBorder }
          }}
        />
      )}
      renderOption={(option,{ inputValue }) => {
        const matches = match(option.title,inputValue);
        const parts = parse(option.title,matches);

        return (
          <div>
            {parts.map((part,index) => (
              <span
                key={index}
                style={{ fontWeight: part.highlight ? 700 : 400 }}
              >
                {part.text}
              </span>
            ))}
          </div>
        );
      }}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption",year: 1994 },{ title: "The Godfather",year: 1972 },{ title: "The Godfather: Part II",year: 1974 },{ title: "The Dark Knight",year: 2008 },{ title: "12 angry Men",year: 1957 },{ title: "Schindler's List",year: 1993 },{ title: "Pulp Fiction",{ title: "The Lord of the Rings: The Return of the King",year: 2003 },{ title: "The Good,the Bad and the Ugly",year: 1966 },{ title: "fight Club",year: 1999 },{ title: "The Lord of the Rings: The Fellowship of the Ring",year: 2001 },{ title: "Star Wars: Episode V - The Empire Strikes Back",year: 1980 },{ title: "Forrest Gump",{ title: "Inception",year: 2010 },{ title: "The Lord of the Rings: The Two Towers",year: 2002 },{ title: "One Flew Over the Cuckoo's nest",year: 1975 },{ title: "Goodfellas",year: 1990 },{ title: "The Matrix",{ title: "Seven Samurai",year: 1954 },{ title: "Star Wars: Episode IV - A New Hope",year: 1977 },{ title: "City of God",{ title: "Se7en",year: 1995 },{ title: "The Silence of the Lambs",year: 1991 },{ title: "It's a Wonderful Life",year: 1946 },{ title: "Life Is Beautiful",year: 1997 },{ title: "The Usual SUSPECTs",{ title: "Léon: The Professional",{ title: "Spirited Away",{ title: "Saving Private Ryan",year: 1998 },{ title: "Once Upon a Time in the West",year: 1968 },{ title: "American History X",{ title: "Interstellar",year: 2014 },{ title: "Casablanca",year: 1942 },{ title: "City Lights",year: 1931 },{ title: "Psycho",year: 1960 },{ title: "The Green Mile",{ title: "The Intouchables",year: 2011 },{ title: "Modern Times",year: 1936 },{ title: "Raiders of the Lost Ark",year: 1981 },{ title: "Rear Window",{ title: "The Pianist",{ title: "The Departed",year: 2006 },{ title: "Terminator 2: Judgment Day",{ title: "Back to the Future",year: 1985 },{ title: "Whiplash",{ title: "Gladiator",year: 2000 },{ title: "Memento",{ title: "The Prestige",{ title: "The Lion King",{ title: "Apocalypse Now",year: 1979 },{ title: "Alien",{ title: "Sunset Boulevard",year: 1950 },{
    title:
      "Dr. Strangelove or: How I Learned to Stop Worrying and love the Bomb",year: 1964
  },{ title: "The Great Dictator",year: 1940 },{ title: "Cinema Paradiso",year: 1988 },{ title: "The Lives of Others",{ title: "Grave of the Fireflies",{ title: "Paths of Glory",{ title: "Django Unchained",year: 2012 },{ title: "The Shining",{ title: "WALL·E",{ title: "American Beauty",{ title: "The Dark Knight Rises",{ title: "Princess Mononoke",{ title: "Aliens",year: 1986 },{ title: "Oldboy",{ title: "Once Upon a Time in America",year: 1984 },{ title: "Witness for the Prosecution",{ title: "Das Boot",{ title: "Citizen Kane",year: 1941 },{ title: "north by northwest",year: 1959 },{ title: "Vertigo",year: 1958 },{ title: "Star Wars: Episode VI - Return of the Jedi",year: 1983 },{ title: "Reservoir Dogs",year: 1992 },{ title: "Braveheart",{ title: "M",{ title: "Requiem for a Dream",{ title: "Amélie",{ title: "A Clockwork Orange",year: 1971 },{ title: "Like Stars on Earth",year: 2007 },{ title: "Taxi Driver",year: 1976 },{ title: "LaWrence of arabia",year: 1962 },{ title: "Double Indemnity",year: 1944 },{ title: "Eternal Sunshine of the Spotless Mind",year: 2004 },{ title: "Amadeus",{ title: "To Kill a Mockingbird",{ title: "Toy Story 3",{ title: "Logan",year: 2017 },{ title: "Full Metal Jacket",year: 1987 },{ title: "Dangal",year: 2016 },{ title: "The Sting",year: 1973 },{ title: "2001: A Space Odyssey",{ title: "Singin' in the Rain",year: 1952 },{ title: "Toy Story",{ title: "Bicycle Thieves",year: 1948 },{ title: "The Kid",year: 1921 },{ title: "InglourIoUs Basterds",year: 2009 },{ title: "Snatch",{ title: "3 Idiots",{ title: "Monty Python and the Holy Grail",year: 1975 }
];

styles.css:

.App {
  font-family: sans-serif;
  text-align: center;
}

/* Chrome,Safari,Edge,Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="search"] {
  -moz-appearance: textfield;
}

/* remove outsideof arrows button */
input[type="search"]::-webkit-outside-spin-button {
  display: none;
}

解决方法

根据这个document你需要添加freesolo

return (
    <Autocomplete
      style={{ width: 300 }}
      options={top100Films}
      freeSolo
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          margin="normal"
          required
          fullWidth
          autoFocus
          classes={{ notchedOutline: classes.input }}
          // onChange={handlePhoneNumberChange}
          placeholder="Search..."
          type="search"
          InputProps={{
            ...params.InputProps,startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),classes: { notchedOutline: classes.noBorder }
          }}
        />
      )}
      renderOption={(option,{ inputValue }) => {
        const matches = match(option.title,inputValue);
        const parts = parse(option.title,matches);

        return (
          <div>
            {parts.map((part,index) => (
              <span
                key={index}
                style={{ fontWeight: part.highlight ? 700 : 400 }}
              >
                {part.text}
              </span>
            ))}
          </div>
        );
      }}
    />
  );

试试这个 css 代码（对于这个链接 https://material-ui.com/components/autocomplete/#autocomplete）

.MuiAutocomplete-popupIndicator {
 display: none !important;
}

你不需要freesolo。

<Autocomplete>
...
popupIcon={null}
/>

通过这种方式，您可以删除 ArrowDownIcon，但请记住 Autocomplete 免费的单独和组合框背后的想法：

小部件（Material UI Autocomplete）对于设置单行文本框的值很有用两种场景之一：

文本框的值必须从一组预定义的允许的值，例如，位置字段必须包含有效位置名称：组合框。
文本框可以包含任意值，但它有利于向用户建议可能的值，例如，搜索字段可能会建议类似或以前的搜索以节省用户时间：免费独奏。