I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class:
'& .MuiPopover-paper': {
height: '330px',
},
None of my attempts have been successful. Interestingly, I am able to modify the height of the .MuiPopover-paper element when I inspect it using the browser console. Changes made there reflect as expected, showing the desired outcome. It appears that I am unable to target the element correctly in the stylesheet or code, as my various attempts have proven ineffective.
Below is the JS/JSX code snippet:
<SelectValidator
id="color"
inputRef={this.formRefs.color}
value={color}
onChange={handleChangeByEvent}
variant="outlined"
name='color'
className={classes.boder}
validators={['required']}
errorMessages={["Please select your vehicle's color"]}
>
<MenuItem value="" className={classes.option}>
<em>None</em>
</MenuItem>
{
vehicleColors.map(color => {
return <MenuItem key={color.id} value={color} className={classes.option}>
{color.name}</MenuItem>
})
}
</SelectValidator>
And here is the corresponding CSS code:
border: {
width: '100%',
margin: '7px 0',
borderRadius: '1px',
color: '#333',
fontSize: '14px',
'& .MuiSelect-iconOutlined': {
top: 'auto',
fontSize: '24px',
color: '#fff',
marginRight: '10px',
backgroundImage: `url(${downImg})`,
},
'& .MuiSelect-select': {
height: '48px',
width: '100%',
display: 'flex',
alignItems: 'center',
border: 'solid 1px #6e6e6e',
padding: '0 14px',
backgroundColor: '#ffffff',
fontFamily: 'FordAntenna-Regular',
color: '#333',
fontSize: '14px',
borderRadius: '3px',
},
},