How to apply style on NoOptionsText in autocomplete material-ui

Question

i want to change color of no options. can you please help me

<Autocomplete
  id="id"
  options={options}
  limitTags={3}
  value={value}
  noOptionsText="no options"
  getOptionLabel={option => option}
  onChange={onChange}
  renderInput={params => (
   <TextField
   {...params}
   label=" title"
   placeholder="Please select"
   />
 )}
/>

Answer 1

You can use classes props to apply styles to a specific sub-component of the Autocomplete component

const useStyles = makeStyles({
  noOptions: {
    color: "red",
    backgroundColor: "pink"
  }
});

export default function Demo() {
  const styles = useStyles();
  return (
    <Autocomplete
      classes={{
        noOptions: styles.noOptions
      }}
      options={top100Films}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

Live Demo