Adjust font size for Autocomplete Dropdown in MUI-CodePudding

I have successfully adjusted the font size of the TextField in my Autocomplete. The problem is that I also wanted to adjust the font size of the dropdown. How will I do it?

Codesandbox is

CodePudding user response：

One solution is to override CSS rule option (

CodePudding user response：

const useStyles = makeStyles(() => ({
  autoComplete: {
    fontSize: "10px"
  },
  // stands for .MuiAutocomplete-option
  option: {
    fontSize: "10px"all at once.
  }
}));

function App() {
  const classes = useStyles();
  // ...
  return (
    <Autocomplete
      classes={{ input: classes.autoComplete, option: classes.option }}

You may also need to add a style for '.MuiAutocomplete-noOptions' too which is named noOptions in the classes objects. Because its fontSize is based on rem, if you want to change font size everywhere, there is also another option to change the font size of HTML and change it all at once.