如何在自动完成 material-ui 中对 NoOptionsText 应用样式

Question

我想改变没有选项的颜色。你能帮帮我吗

<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

您可以使用 classes 属性将样式应用到 Autocomplete 组件的特定 sub-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" />
      )}
    />
  );
}

现场演示