CODEWITHSUNDEEP
reactjsreact-hooksmaterial-ui
Joseph
Joseph

Reputation: 7755

Adjust font size for Autocomplete Dropdown in MUI

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
    />
  )}
/>

Upvotes: 2

Views: 4263

Answers (3)

NearHuscarl
NearHuscarl

Reputation: 81290

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" />}
/>

Codesandbox Demo

Upvotes: 6

amirhe
amirhe

Reputation: 2341

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.

Upvotes: 1

hgb123
hgb123

Reputation: 14881

One solution is to override CSS rule option (doc)

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

Edit Material UI Autocomplete (forked)

Upvotes: 1

Related Questions