I've been attempting to modify the padding within the MUI autocomplete component, but unfortunately, it doesn't appear to be functioning correctly
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 specific class I am attempting to utilize createEventInput
createEventInput: {
padding: '10.5px 14px 10.5px'
}
Upon opening the application, this is the issue I'm encountering: component styles when inspecting the input element
However, you'll notice that other styles are not being applied as expected: Padding not working properly I understand that using the !important flag would override the input padding, but I prefer to avoid that approach.