Currently, I am developing a react application that utilizes Material Dashboard. I am encountering an issue with the height of a Select (drop-down list) component.
On the right side of my app, there is a standard input field and I would like the style of the select component to match that. However, my attempts have not been successful.
I have tried 2 different approaches:
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Price</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
//value={age}
label="Price"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</Box>
<MDInput
select
labelId="demo-simple-select-label"
id="demo-simple-select"
//value={age}
label="Price"
InputProps={{
classes: {root: "select-input-styles"},
}}
fullWidth
>
<MenuItem value={10}>No</MenuItem>
<MenuItem value={11}>C</MenuItem>
<MenuItem value={12}>Vehicles</MenuItem>
<MenuItem value={14}>XD</MenuItem>
</MDInput>
In both instances, the styling is not rendering correctly as intended.
Upon inspecting the element in the browser's developer tools, I noticed a potential solution by adjusting the padding within the CSS stylings:
.css-1cohrqd-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.MuiSelect-select{display:grid;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.75rem!important;}
However, I cannot locate this specific code snippet within my project files.
I am seeking assistance on how to correct the height of the Select component. Any help is greatly appreciated!