CODEWITHSUNDEEP
cssreactjsmaterial-ui
liam-bai
liam-bai

Reputation: 81

How do I change Material UI Autocomplete font size?

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.

Upvotes: 6

Views: 18869

Answers (5)

Ketan patel
Ketan patel

Reputation: 1

<Autocomplete
        id="combo-box-demo"
        options={top100Films}
        renderOption={(option) => (
          <Typography style={{ fontSize: "1.5rem" }}>{option.title}</Typography>
        )}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            inputProps={{ ...params.inputProps, style: { fontSize: "1rem" } }}
          />
        )}
      />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20080

In my case I had requirement to increase font size of lable and I have solved it by following way

Solution:

TextFieldProps={{
    error: props.error,
    helperText: props.helperText,
    InputLabelProps: {
        required: props.required,
        style: {
            fontSize: 18,
        },
    },
}}

Detailed Solution:

<Autocomplete
    freeSolo
    fullWidth={true}
    label={props.label}
    margin={'noraml'}
    multiple={false}
    name={props.name}
    isOptionEqualToValue={useCallback((option, value) => option.label === value.label, [])}
    value={props.value}
    options={props.options}
    ref={selectRef}
    placeholder={props.placeholder}
    disabled={props.disabled}
    TextFieldProps={{
        error: props.error,
        helperText: props.helperText,
        InputLabelProps: {
            required: props.required,
            style: {
                fontSize: 18,
            },
        },
    }}
    renderInput={useCallback(params => (
        <TextField {...params} variant='standard'/>
    ), [])}
    onChange={useCallback((e, v) => {
        if (typeof v === 'object' && v !== null) {
            _onChange(e, v)
        } else {
            _onChange(e, {label: ''})
        }
    }, [])}
/>

Upvotes: 0

Unicone
Unicone

Reputation: 338

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` } }}

Upvotes: 7

Emin Adiloğlu
Emin Adiloğlu

Reputation: 97

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

Upvotes: 1

DesperateEi
DesperateEi

Reputation: 144

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)

Upvotes: 5

Related Questions