如何设置Material UI AutoComplete组件endAdornment图标的样式

你的样式未生效主要有两个原因：

• .MuiAutocomplete-endAdornment是图标容器，真正的图标是其内部的svg元素，直接设置容器样式不会影响图标
• 之前的选择器层级匹配错误，导致样式无法命中目标元素

下面是两种可行的解决方案：

方案一：直接在Autocomplete的sx中设置正确选择器 #

通过选中容器内的svg元素，直接修改颜色和尺寸：

<Autocomplete
  disablePortal
  id="search-bar"
  options={data}
  sx={{
    width: "100%",
    flex: 1,
    // 精准选中下拉图标并设置样式
    '& .MuiAutocomplete-endAdornment svg': {
      color: "white",
      fontSize: 24, // 用fontSize控制尺寸，比scale更稳定
    },
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      InputLabelProps={{
        sx: { color: "#12efc8" },
      }}
      name="subCategory"
      type="text"
      sx={{
        width: "100%",
        input: {
          color: "#12efc8",
        },
        maxWidth: "inherit",
        '& .MuiInputBase-root': {
          height: "49px",
          '&.focus': {
            backgroundColor: "transparent",
          },
        },
      }}
      variant="outlined"
      label="Add Sub-Category"
    />
  )}
/>

方案二：自定义endAdornment（更灵活） #

直接修改renderInput参数中的endAdornment，在外层包裹容器来控制样式：

import { Box } from '@mui/material';

<Autocomplete
  disablePortal
  id="search-bar"
  options={data}
  sx={{
    width: "100%",
    flex: 1,
  }}
  renderInput={(params) => {
    // 重写endAdornment，添加自定义样式
    params.InputProps.endAdornment = (
      <Box sx={{ color: "white", fontSize: 24 }}>
        {params.InputProps.endAdornment}
      </Box>
    );
    return (
      <TextField
        {...params}
        InputLabelProps={{
          sx: { color: "#12efc8" },
        }}
        name="subCategory"
        type="text"
        sx={{
          width: "100%",
          input: {
            color: "#12efc8",
          },
          maxWidth: "inherit",
          '& .MuiInputBase-root': {
            height: "49px",
            '&.focus': {
              backgroundColor: "transparent",
            },
          },
        }}
        variant="outlined"
        label="Add Sub-Category"
      />
    );
  }}
/>

补充说明 #

• 不建议用scale来调整图标尺寸，容易导致布局偏移，Material UI图标推荐用fontSize控制大小
• .MuiAutocomplete-endAdornment是Autocomplete组件注入到TextField的元素，属于InputBase的子元素而非FormControl的直接子元素，之前的选择器层级错误导致样式无法生效

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