How to style a single element inside Material-ui autocomplete

I have an array of movies in a Material-UI autocomplete, and I want to add my favorite movie- Office Space- to this array. Is there a way I can give this single movie custom styling so that it has text color: primary?

export default function Playground() {
  const favMovie = {title: "Office Space", year: 1999}
  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
        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 },
  ...,
]

See also my sandbox

Answer

Add this in Autocomplete component:

renderOption={(option) => {
  if (option.hasOwnProperty("color"))
    return <div style={{ color: option.color }}>{option.title}</div>;
  return <div>{option.title}</div>;
}}

And edit you data model like this:

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972, color: "red" },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 }
];

See also my forked codeSanbox