Is it possible to modify the behavior of the dropdown in Material UI Select? I would like to customize the appearance of <ul> so that it does not resemble a pop-up.
My goal is for the selected item to be contained within the <li> element, similar to the layout shown in the second image below:
Here is the current Select Component of Material UI: https://i.sstatic.net/AbrdY.png
What I aspire to achieve is something like this: https://i.sstatic.net/F6Rzf.png
This is my code:
<FormControl
variant="outlined"
className={clsx(
classes.formControl,
success && classes.success,
danger && classes.danger
)}
required={isRequired}
>
<InputLabel>{label}</InputLabel>
<Select
value={value}
onChange={e => handleOnChange(e)}
// MenuProps={{ classes: { paper: classes.dropdownPaper }}}
label={label}
name={name}
MenuProps={{
classes: { paper: classes.dropdownPaper },
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
getContentAnchorEl: null
}}
>
{options.map((opt, index) => {
return (
<MenuItem value={opt.value} key={index}>
{opt.text}
</MenuItem>
);
})}
</Select>
</FormControl>;