MUI autocomplete override input padding not working

Question

I'm trying to override the padding inside the MUI autocomplete component but it doesn't seem to be working properly

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
    const checkedIcon = <CheckBoxIcon fontSize="small" />;
    const _getCustomOption = (props, option, { selected }) => {
        const renderOption = (
            <li { ...props }>
                <Checkbox icon={ icon } checkedIcon={ checkedIcon } checked={ selected } classes={ { root: classes.checkbox } } />
                    { option }
            </li>
        );
        return multiple? { renderOption } : {};
    };
    const _renderInput = (params) => (
        <Field { ...params } variant="outlined" placeholder={ placeholder } InputProps={ { ...params.InputProps, readOnly: true } } classes={ { root: `${fieldRootClassName} ${classes.textFieldRoot}` } } />
    );

    return (
        <React.Fragment>
            <Typography variant="subtitle1" gutterBottom className={ `${labelClassName} ${disabled ? classes.disabledText : ''}` }
                        noWrap align="left" style={ { color: labelColor } }>
                { required ? `${label} *` : label }
            </Typography>
            <Autocomplete fullWidth multiple
                          classes={ { root: `${fieldRootClassName} ${classes.textFieldRoot}`, inputRoot: `${classes.createEventInput}`, input: `${classes.createEventInput}`, listbox: classes.dropdownListBox, tag: classes.chipTag, paper: classes.dropdownPaper } }
                          disableCloseOnSelect={ multiple } options={ options } renderInput={ _renderInput } disabled={ disabled } onChange={ _onSelectionChange } { ..._getCustomOption } />
        </React.Fragment>
    );

This is the class I am trying to use createEventInput

createEventInput: {
   padding: '10.5px 14px 10.5px'
}

When I try to open the application this is what I am seeing component styles when inspecting the input element

But at the same time you can see that the other style are not taken into consideration Padding not working properly I know if I use the,important flag it will override the input padding. but I don't want to use that.

Answer 1

The issue is the css specificity. The selector that is applying the styles is: .css-eozd4h-MuiAutocomplete-root.MuiOutlinedInput-root.MuiAutocomplete-input which has a css specificity of (0,3,0).

You also showed the image of your styles being applied, but being overwritten. The reason this is happening is because the selector is .CustomTextField-createEventInput-13685 which has a specificity of (0,1,0). In order for your padding styles to be applied, you need your selector to have a specificity greater than (0,3,0).

Your code snippet does not show what is returning your classes object, so I'll assuming you're using something like makeStyles , and that you still want to apply the input styles as you are (via the input classes key). You could achieve a higher specificity by doing something like:

createEventInput: {
  "&&&&": {
    padding: '10.5px 14px 10.5px'
  }
}

The above works because the & is the "parent selector" which in this case equates to .CustomTextField-createEventInput-13685 . By repeating the & 4 times, we end up with a final selector of .CustomTextField-createEventInput-13685.CustomTextField-createEventInput-13685.CustomTextField-createEventInput-13685.CustomTextField-createEventInput-13685 which is quite ugly... But it does result in a specificity of (0,4,0).

NOTE depending on how your project is set up you might be able to match the specificity and have your styles take precedence (ie only needing &&&).

A less ugly way to match specifity might be styling the input via the "root".

textFieldRoot: {
  // this has a specificity of (0,3,0) so might not work if you need to be more specific.
  "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
    padding: '10.5px 14px 10.5px'
  }
}