如何删除第二个 x 按钮，即自动完成内 TextField 中的左侧按钮？

Question

我有一个搜索栏，它使用 material ui 中的自动完成来提供建议，并且在其中我有一个文本字段，我可以在其中输入文本。

唯一的问题是，当我在 TextField 中键入任何内容时，我可以看到 2 个清除按钮（x 按钮），一个在加载屏幕的左侧，一个在右侧，当加载屏幕消失时，我得到 2清除彼此相邻的按钮。左边的那个我想去掉，因为它看起来很糟糕，我不知道它为什么在那里。

Search.jsx:

<div className={searchClasses.search}>
      <Autocomplete
        options={isEmpty ? [] : suggestionsList}
        freeSolo
        style={{width: "100%"}}
        getOptionLabel={(option) => option.title}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            autoFocus
            loading={loading}
            style={{margin: 0}}
            classes={{ notchedOutline: classes.input }}
            onChange={handleOnChange}
            onKeyDown={e => handleKeyDown(e)}
            placeholder="Search..."
            type="search"
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              ),
              endAdornment: (
                <React.Fragment>
                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
                  {params.InputProps.endAdornment}
                </React.Fragment>
              ),
              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>
          );
        }}
      />
</div>

Answer 1

解决方案

创建一个新的 CSS 样式表（比如说 styles.css）并添加以下代码：

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

接下来，在 Search.jsx:

的开头导入此样式表

import "./styles.css";

/* Your code here ... */

说明

左侧的“X”取消按钮存在是因为基于 Webkit 的浏览器（例如 Chrome 和 Safari 会自动将取消按钮添加到所有 <input type="search"> 元素。由于您的 TextField 元素具有属性 type="search"，它会在屏幕上呈现 <input type="search">，因此您的浏览器会自动添加“X”按钮。

可以使用 ::-webkit-search-cancel-button 伪元素 select 或 select 编辑默认的“X”按钮。在我们的 style.css 中，我们 select 所有 <input type="search"> 元素中的所有默认“X”按钮，我们使用 -webkit-appearance: none;

隐藏它们

如何删除第二个 x 按钮，即自动完成内 TextField 中的左侧按钮？

How to remove the second x button, the left one inside a TextField inside a Autocomplete?

reactjs

autocomplete

material-ui

next.js

dropdown

解决方案

说明