如何删除第二个 x 按钮，即 Autocomplete 内 TextField 内的左侧按钮？

Question

我有一个搜索栏，它使用材料 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 伪元素选择器选择默认的“X”按钮。在我们的style.css 中，我们选择所有<input type="search"> 元素中的所有默认“X”按钮，并使用-webkit-appearance: none; 隐藏它们