如何移除MUI Autocomplete TextField的蓝色外边框？

你之前通过.MuiAutocomplete-inputFocused设置边框和轮廓无效，核心原因是Outlined变体的TextField，聚焦时的蓝色边框来自外层的.MuiOutlinedInput-notchedOutline容器元素，而非input本身的样式，直接修改input的样式当然不会生效。

下面是可行的解决代码：

<Autocomplete
  {...{ className }}
  multiple
  options={options}
  value={value}
  onChange={handleOnChange}
  id="tags-standard"
  renderInput={(params) => (
    <TextField
      {...params}
      sx={{
        // 覆盖OutlinedInput聚焦时的蓝色边框容器
        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
          border: 'none',
        },
        // 移除input元素聚焦时的轮廓和阴影
        '& .MuiAutocomplete-inputFocused': {
          outline: 'none',
          boxShadow: 'none',
        },
        // 可选：移除hover状态的边框高亮
        '&:hover .MuiOutlinedInput-notchedOutline': {
          borderColor: '#e0e0e0', // 替换成你需要的颜色，或设为none
        }
      }}
      label="Search or add new tags"
      variant="outlined"
      fullWidth
      onInput={handleInputChange}
      value={inputValue}
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <>
            {params.InputProps.endAdornment}
            <Button onClick={handleAddNewOption}>Add</Button>
          </>
        )
      }}
    />
  )}
/>

关键说明 #

1. 聚焦时的蓝色边框是.MuiOutlinedInput-notchedOutline这个容器的样式，必须通过.Mui-focused父类定位到它才能修改。
2. input元素本身可能还有outline或boxShadow，需要单独覆盖.MuiAutocomplete-inputFocused的样式。
3. 如果你的项目自定义了MUI主题的聚焦色，可能需要在样式后加!important强制覆盖（优先推荐通过主题配置统一修改，尽量少用!important）。

内容的提问来源于stack exchange，提问作者Ali Gajani