How do I change Material UI Autocomplete font size?

user_13783613 0
Viewed 8408

I am trying apply custom css to the Material UI Autocomplete component. Specifically, I want to change the font size of the input field. Here's what I have right now:

<Autocomplete
  style={{
    width: 200,
    height: 60,
    marginLeft: 15,
  }}
  options={["foo", "bar"]}
  renderInput={(params) => (
    <TextField
      InputProps={{ style: { fontSize: 30 } }}
      {...params}
      margin="normal"
    />
  )}
/>

I believe that my TextField is being styled properly, but it's CSS is being overwritten by the Autocomplete CSS. Any help is appreciated. Thanks in advance.

material-ui reactjs css
3 Answers

In case someone is still searching for an answer, this is how to correctly apply CSS properties to the input element according to the Autocomplete API. With this method you leverage the possibility of providing classes to underlying elements of the autocomplete component.

<Autocomplete 
size={"small"} 
id="box" options={myOptions} 
getOptionLabel={(option: string) => option} 
renderInput={(params) => <TextField {...params} variant="outlined" /> } 
classes={{ input: classes.smallFont }} />

Instead of "input" you could for example specify a class for "inputRoot" to set a class at the input root element (depending on what you want to achieve)

user_59009400

You could try 2 of those things,

  1. Swap these two lines
InputProps={{ style: { fontSize: 30 } }}
{...params}

to be

{...params}
InputProps={{ style: { fontSize: 30 } }}

This is because the second {...params} override the InputProps.

  1. You can change the Inputprops CSS with the !important marker as the following:
InputProps={{ style: { fontSize: `30 !important` } }}
  1. You need to put spreader params.InputProps in InputProps to ensure showing autocomplete options:
InputProps={{ ...params.InputProps, style: { fontSize: `30 !important` } }}
user_73143290

You can change className from params in renderInput function

const useStyles = makeStyles((theme) => ({     
    comboOptions: {
        fontSize: '12px',
        color: 'red'
    }
}));


    <Autocomplete key={index}
    size="small"
    value={combo.value}
    options={combo.options}
    renderOption={(option) => (
        <Typography className={classes.comboOptions}>{option.name}</Typography>
    )}
    getOptionLabel={(option) => option.name}
    renderInput={(params) => {
        params.inputProps.className = classes.comboOptions
        return <TextField
            {...params} label={combo.text}
            variant="outlined"
        />
    }
    }
    onChange={(event, newValue) => {
        combo.onChange(newValue)
    }}
/>
user_85917540
Related