I've been struggling to center the options in a MUI autocomplete and wrap each option in a border. I've tried multiple methods without success, including adding it to inputProps and using a style paper component.
const PlacementCell = ({ value, placements, notAvailable = false, readOnly = false }: PlacementCellProps): ReactElement => {
const { palette, spacing } = useTheme();
const [selectedPlacement, setSelectedPlacement] = useState<Placement | undefined>(value || placements[0]);
const handlePlacementChange = (event: React.SyntheticEvent, newValue: Placement | null) => {
if (newValue !== null) {
setSelectedPlacement(newValue);
}
};
const CustomListbox = styled('ul')({
[`& .${autocompleteClasses.option}`]: {
display: 'flex',
justifyContent: 'center',
},
});
return (
<Stack
direction="row"
height={1}
alignItems="center"
spacing={2}
justifyContent="space-between"
>
<Autocomplete
options={placements}
getOptionLabel={(option) => option.placementName}
renderInput={(params) => (
<TextField
placeholder="Select"
{...params}
InputProps={{
...params.InputProps,
disableUnderline: true,
}}
inputProps={{
...params.inputProps,
style: { textAlign: 'center' },
}}
sx={{
[`& .${autocompleteClasses.inputRoot} .MuiInput-input`]: {
padding: '12px',
},
variant: 'bodySmall.default',
[`& .${autocompleteClasses.popupIndicator}`]: {
right: 12,
['&:hover']: {
backgroundColor: 'transparent',
},
},
}}
/>
)}
// PaperComponent={CustomPaper}
fullWidth
disableClearable
onChange={handlePlacementChange}
/>
</Stack>
);
};
If you need a visual reference, check out this image: https://i.sstatic.net/DIQcfY4E.png
Any suggestions would be greatly appreciated!