如何为Material-UI Autocomplete组件内的单个选项添加自定义样式

数据老陈

2026-10-6

解决方案

实现思路

Autocomplete组件提供了renderOption属性用于自定义选项的渲染逻辑，我们只需要在渲染每个选项时判断是否为你的收藏电影《Office Space》，匹配的话单独设置样式即可。
你可以选择直接匹配电影标题，也可以给收藏的电影对象加个特殊标识字段（比如isFav: true），后续修改收藏内容更灵活。

修改后的完整代码

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';

export default function Playground() {
  // 给收藏电影加标识，方便后续扩展多个收藏项
  const favMovie = {title: "Office Space", year: 1999, isFav: true}
  top100Films.push(favMovie)

  const defaultProps = {
    options: top100Films,
    getOptionLabel: (option) => option.title
  };

  const [movies, setMovies] = useState([]);

  return (
    <div style={{ width: 300 }}>
      <Autocomplete
        {...defaultProps}
        id="select-on-focus"
        selectOnFocus
        // 新增renderOption自定义选项渲染
        renderOption={(props, option) => (
          <li {...props}>
            <Typography color={option.isFav ? "primary" : "inherit"}>
              {option.title}
            </Typography>
          </li>
        )}
        renderInput={(params) => (
          <TextField {...params} label="movies" margin="normal" />
        )}
        onChange={(e, movie) => {
          if (movie) {
            setMovies([...movies, movie.title]);
          }
        }}
      />
    </div>
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  // 其余电影数据
]