基于React的Material UI：如何为<Autocomplete/>组件设置圆角样式

针对你遇到的输入框前缀图标添加、圆角下拉菜单对齐、样式设置问题，直接给出修改方案：

1. 添加输入框前缀搜索图标 #

在renderInput的TextField中，通过InputProps的startAdornment添加前缀图标，同时调整内边距优化文本与图标间距：

renderInput={(params) => (
  <TextField
    {...params}
    label="Search users..."
    InputProps={{
      ...params.InputProps,
      startAdornment: (
        <InputAdornment position="start">
          <SearchIcon />
        </InputAdornment>
      ),
    }}
  />
)}

需额外导入InputAdornment：import InputAdornment from '@mui/material/InputAdornment';

2. 解决圆角后下拉菜单对齐问题 #

放弃全局CSS修改，通过Autocomplete和TextField的sx属性统一控制样式，避免冲突：

• 给输入框设置圆角，同时调整内边距匹配谷歌搜索栏的文本空间
• 给下拉菜单（Paper组件）设置匹配的圆角，消除默认间距确保和输入框对齐

3. 完整修改后的代码 #

import React, { useState, useEffect } from 'react';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Autocomplete from '@mui/material/Autocomplete';
import { Box } from '@mui/system';
import SearchIcon from '@material-ui/icons/Search';
import InputAdornment from '@mui/material/InputAdornment';

const LiveSearch = (props) => {
  const [jsonResults, setJsonResults] = useState([]);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then(res => res.json())
      .then(json => setJsonResults(json));
  }, []);

  return (
    <Stack sx={{ width: 400, margin: "auto"}}>
      <Autocomplete
        id="Hello"
        getOptionLabel={(option) => option.name}
        options={jsonResults}
        noOptionsText="No results"
        isOptionEqualToValue={(option, value) => option.name === value.name}
        renderOption={(props, option) => (
          <Box component="li" {...props} key={option.id}>
            {option.name} - Ahhh
          </Box>
        )}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Search users..."
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              ),
            }}
            sx={{
              '& .MuiOutlinedInput-root': {
                borderRadius: 30, // 设置输入框圆角
                paddingLeft: 1, // 优化文本与图标间距
                '&:hover .MuiOutlinedInput-notchedOutline': {
                  borderColor: '#ccc',
                },
                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                  borderColor: '#1a73e8',
                },
              },
            }}
          />
        )}
        sx={{
          '& .MuiAutocomplete-paper': {
            borderRadius: 30, // 下拉菜单圆角匹配输入框
            marginTop: 0, // 消除菜单与输入框的间距
            borderTopLeftRadius: 0, // 可选：去掉菜单顶部左圆角，贴合谷歌搜索栏样式
            borderTopRightRadius: 0,
          },
        }}
      />
    </Stack>
  )
}

export default LiveSearch;

关键改动说明 #

• 修正了getOptionLabel和renderOption中的参数命名，避免与状态变量重名
• 通过组件内sx属性修改样式，避免全局CSS污染
• 统一输入框和下拉菜单的圆角样式，消除默认间距实现对齐
• 添加InputAdornment实现前缀图标，调整内边距优化文本空间

内容的提问来源于stack exchange，提问作者John Kealy