Adjust font size for Autocomplete Dropdown in MUI

Question

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 here.

<Autocomplete
  classes={{ input: classes.autoComplete }}
  value={selectedOption ?? ""}
  onChange={(e, value) => handleOptionChange(value)}
  options={options}
  getOptionLabel={(option) => option.name || ""}
  renderInput={(params) => (
    <TextField
      {...params}
      label="freeSolo"
      margin="normal"
      variant="outlined"
      fullWidth
    />
  )}
/>

NearHuscarl · Answer 1 · 2021-11-05T05:03:59.190

The fontSize of each option in the dropdown is from theme.typography.body1.fontSize. If you want to change that variant globally, do that in createTheme:

const theme = createTheme({
  typography: {
    body1: {
      fontSize: 22,
    }
  }
})

This changes the font size in both TextField and MenuItem:

<ThemeProvider theme={theme}>
  <Autocomplete {...} />
</ThemeProvider>

You can also change the MuiAutocomplete styles separately in createTheme:

const theme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        root: {
          '& label': {
            fontSize: 22,
          },
        },
        input: {
          fontSize: 22,
        },
        listbox: {
          fontSize: 22,
        },
      },
    },
  },
});

Or if you want to change the font size in an isolated component in v5, you can use sx or styled:

`sx`

<Autocomplete
  options={top100Films}
  ListboxProps={{
    sx: { fontSize: 22 },
  }}
  sx={{
    '& .MuiAutocomplete-input, & .MuiInputLabel-root': {
      fontSize: 22,
    },
  }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

`styled()`

const StyledAutocomplete = styled(Autocomplete)({
  '& .MuiAutocomplete-input, & .MuiInputLabel-root': {
    fontSize: 22,
  },
});
const Option = styled('li')({
  fontSize: 22,
});

<StyledAutocomplete
  options={top100Films}
  renderOption={(props2, option) => (
    <Option {...props2}>{option.label}</Option>
  )}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

Thank you. But I really don't want to put the styles directly from the component. Any solutions which is easier to migrate makeStyles to the new ones? — Joseph, Nov 05 '21 at 04:30
I'm using v5 alpha now. But of course I want to update it to the latest versions. So that's why I will not use makeStyles. and if there's easy alternative to it that will be supported until v6. — Joseph, Nov 05 '21 at 04:32
@Joseph the easiest alternative is `sx`, the other one is [`styled`](https://mui.com/system/styled/#main-content) which is roughly equivalent to `makeStyles`/`withStyles` in a sense that it creates a reusable styles. Unfortunately there is no easy way to migrate to v5 because `styled` and `makeStyles` API are quite different, so you probably need to change the code by hand instead of using a codemod (there is no codemod to automate this task completely). — NearHuscarl, Nov 05 '21 at 04:37

score 1 · Accepted Answer · answered Nov 05 '21 at 02:22

1

One solution is to override CSS rule option (doc)

<Autocomplete
  classes={{
    input: classes.autoComplete,
    option: classes.autoComplete
  }}
  // ...
/>

answered Nov 05 '21 at 02:22

hgb123

13,869
3
20
38

Thank you. How about on material v5? Is makeStyles still good? – Joseph Nov 05 '21 at 02:27
I think it depends on which we feel convenient to use. And on v5, you could try [sx prop](https://mui.com/system/the-sx-prop/) – hgb123 Nov 05 '21 at 02:32
Ok cool. But what do you recommend? will they remove makeStyles in the future or no? – Joseph Nov 05 '21 at 02:34
@Joseph Don't use `makeStyles` in v5 as it's deprecated. See [here](https://stackoverflow.com/a/69678388/9449426) for more detail. The alternatives are `styled()` for reusable component and `sx` for one-off styles. – NearHuscarl Nov 05 '21 at 04:10

score 1 · Answer 3 · answered Nov 05 '21 at 02:25

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.

Adjust font size for Autocomplete Dropdown in MUI

3 Answers3

sx

styled()

`sx`

`styled()`