I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list with a fixed height and add scroll functionality when it overflows. Learn more about react-select here
Below is a snippet of my code:
class Project extends React.Component {
render() {
const selectStyles = {
input: base => ({
...base,
color: theme.palette.text.primary,
'& input': {
font: 'inherit',
},
})
};
return ( <
SelectN inputProps = {
{
name: 'headedByUserId',
id: 'headedByUserId',
}
}
classes = {
classes
}
styles = {
selectStyles
}
options = {
suggestions
}
components = {
components
}
value = {
this.state.fields["headedByUserId"]
}
onChange = {
this.handleChangeDropdown.bind(this, "headedByUserId")
}
placeholder = "select owner"
/
>
)
}
}